vue学习（一）

组件是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传递的数据是单向的（也就是说父组件数据变化时可以传递给子组件，但是反过来子组件是不可以传递给父组件的——单向数据流）