简介
vue中组件是非常核心的部分，也是开发中必须学会的东西。vue组件化开发是一种很重要的思想，它强调多次复用。你写好一个组件中，可以将它应用在任意你想要应用的地方上来。
创建方法
全局注册
<script>
Vue.component(tagName, options)
//其中options为选项，也就是组件对象本身，tagname为组件的名字，只是一种简写方法
</script>
局部注册
<script>
new Vue({
el: '#app',
components: {
'cpn': cpn
}
})
//其中cpn为组件对象，即上面提到的options
//另外，可以使用语法增强写法，直接在对象中写cpn即可，代表着'cpn' : cpn
</script>
传值方法
父传子
<div id="app">
<child :message=test></child>
</div>
<script>
const child = {
props: ['message'],
template: '<span>{{ message }}</span>'
}
new Vue({
el: '#app',
data : {
test: 'hello!'
},
components:{
child
}
})
</script>
通过使用props属性，可以直接调用在标签上被传进来的值。需要注意的是，这个message是不能直接用v-model进行绑定的，要是真想要绑定，请查阅我的上一篇文章，有提到组件v-model的正确用法。
子传父
此时需要使用到自定义事件。
<script>
cpn = {
template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
incrementHandler: function () {
this.counter += 1
this.$emit('increment',this.counter)
}
},
}
new Vue({
el: '#app',
data: {
total: 0
},
methods: {
incrementTotal: function (counter) {
this.total = counter*2
}
},
components:{
cpn
}
})
</script>
在标签上监听自定义事件，当该自定义事件被子组件使用$emit抛出后，我们即可收到抛出的信息。
父访问子
使用$children属性可以获得所有子组件对象，根据下标可以获得对应的子组件，然后再访问其信息。
使用 refs.xxx，其中xxx即为刚刚标的记号，这样也能获得子组件对象。
子访问父
$parent访问父组件
$root访问根组件
组件插槽
此处简单介绍（新版有不同的地方）：
插槽意味着一个组件可以传入一些新东西作为构成的一部分，这部分叫做插槽。
<cpn>这里放着要插入的部分</cpn> <slot>这里会被插入</slot>
扫描二维码关注公众号，回复：
9838631 查看本文章
具名插槽就是给插槽指定名字，然后插入前可以选择插槽插入，而不是默认插入位置。
作用域插槽是指插入前可以指定作用域：
要插入的部分加入属性 slot - scope = ‘aaa’
被插入的部分加入变量 :bbb = ‘ccc’，那么
要插入部分就可以通过aaa.bbb要调用变量ccc，即实现了插入前就调用到了被插入组件的信息ccc
