Vue中有一个概念叫做组件化，就是把页面分成一个个小的部分，每个部分有自己的功能，且可以复用。最外层的组件即根组件，除此之外会有很多子组件。子组件分为两种，全局组件和局部组件：
全局组件，用 Vue.component(组件名，{}) 这种方法创建，在根组件接管范围内可以用组件名当标签名的方式直接使用。
Vue.component('item',{
props:[],
template: "<p>{{x}}</p>",
data:function(){
return{
x:"hello"
}
},
methods:{
func:function(){}
}
})
子组件与根组件不同的几个点在于：
因为在某些标签内，只允许出现特定的标签（如ul标签内只有li标签是有效的），因此使用子组件的模板时可能会引起解析错误，这时就要给标签添加is属性来解决这个问题：
<li is="item"></li>
使用is属性有两种方法，将子组件在components中注册后，用is="组件名"的方法；或是将子组件在data中注册，再用 :is="变量名"的方法使用。
通过后一种绑定方式，我们可以实现动态组件。即，将变量指向不同的组件，页面的内容也就跟着改变了。
通过传统的getElementById的方法不方便拿到子组件对应的节点，因此在组件的模板中，可以给标签加上一个ref属性ref=“引用名”，然后通过this.$refs.引用名就可以拿到这个DOM节点。这个方法对于普通标签同样适用。
组件第一次创建时会存入内存中，当再次调用该组件时不会重新创建组件，而是直接从内存中取。在标签中直接添加v-once即可，不需赋值
<body>
<div id='box'>
<it>
<template slot-scope="props">
<h1>{{props.con}}</h1>
</template>
</it>
</div>
<script>
Vue.component('it',{
data:function(){
return{
text:['aa','bb']
}
},
template:`
<div>
<slot v-for="item in text" :con="item"></slot>
</div>
`
})
var vm=new Vue({
el:"#box"
})
</script>
</body>
前面讲指令时已经说到过，v-bind指令可以用来接收父组件传给子组件的值，如要将父组件数组的值都存入子组件数组：
<p v-for="item in list" v-bind:content="item"></p>
再在子组件的props中定义content即可。
单向数据流：父组件传给子组件的值，不能在子组件中修改。如果确实需要修改，则在子组件中定义一个变量接收这个值，并在后续过程中修改这个变量。
参数校验：在子组件中对父组件传来的值进行约束，此时将子组件的props写为对象而不是数组，对象的每个键表示接收的数据，值有几种写法：
type：规定的接收类型
required：是否必须。值为true表示必须传入这个值
default：没有传入这个值时该变量的默认值
validator：通过一个函数判断传入值是否符合要求
通过$emit(“自定义事件名”，参数)的方式向外触发事件，在父组件中添加响应函数，可使用子组件传递出的参数
监听自定义事件的方法：在子组件标签上用@事件名 或.$on(事件名，响应函数)的方法进行事件监听
非父子组件的传值，使用发布订阅模式，也叫总线模式。即将要传递的值挂载到总线上，其他任何要接收这个值的地方都可以通过总线获取这个值
创建bus属性： Vue.prototype.bus=new Vue()
需要传值时，在组件时间触发的函数中用this.bus.$emit(‘自定义事件名’,参数)向外方法触发自定义事件，需要传递的数据可以作为参数
在需要接收的地方，用this.bus.$on()方法接收传递来的事件（这部分代码可放在生命周期函数中）