vue学习（一）

蔚落 2021-12-16 04:18 243阅读 0赞

组件是vue 最核心的功能

## **组件与复用** ##

vue的组件提高了重用性，让代码可以复用。

***- 组件的用法***  
组件需要注册后才可以使用。注册主要分全局注册和局部注册两种。  
其中，全局注册的组件在任何的Vue实例中都可以使用，而局部注册的组件只能在当前实例使用。  
全局注册代码：

Vue.component("my-component",{
    	//选项
    })
    
    //my-component是自定义的组件名：推荐使用小写加短线形式（因为在html中是不区分大小写）
    //接下来会介绍组件中的选项

在这儿要讲一下*Vue组件模版的限制*  
比如`<table>` 内规定只能使用`<tr>,<td>,<th>`等这些元素，所以在`<table>`内直接套组件是无效的，所以需要使用特殊的is属性来挂载组件

<div id="app">
        <table>
            <tbody is="my-component"></tbody>
        </table>
    </div>
    
    Vue.component("my-component",{
        template:"<div>这里是组件内容</div>"
    })
    new Vue({
        el:"#app"
    })
    
    
    //<tbody>在渲染时，会被替换为组件内容。
    //这种限制还包括<ul>，<ol>，<select>

可以发现我在上实例中用到了一个template选项，指的是我们组件的模版，其中template的DOM结构必须包含一个元素，比如上实例的template中没有`<div></div>`是无法渲染的。

除了template选项外，组件中的选项还有data , computed , methods 等。  
但是在组件中的data和Vue实例中的data大有区别，组件中的data是函数，会将数据return出去。

<div id="app">
        <my-component></my-component>
    </div>
    
    Vue.component("my-component",{
        template:"<div>{
       {message}}</div>",
        data : function(){
    		return {
    			message : " 组件内容"
    		}
    	}
    })
    new Vue({
        el:"#app"
    })

根据JS对象的引用关系，如果return出的对象引用的是一个外部的对象，那这个对象就是共享的，任何一个地方修改都会同步。

## 使用props传递数据 ##

组件不仅是将模版的内容进行复用，更重要的是组件之间进行通信。  
props是组件用来接收父组件传递来的数据的，通过props传递的数据是单向的（也就是说父组件数据变化时可以传递给子组件，但是反过来子组件是不可以传递给父组件的——单向数据流）