一、Vue中的组件
- 组件（Component）是Vue.js最强大的功能之一，组件可以扩展HTML元素，封装可重用的代码；
- 怎么声明一个组件：
// js
Vue.component('my-component',{
template: '<h1>Hello Vue.js</h1>'
})
var app = new Vue({
el: '#app'
})
// HTML
<div id="app">
<my-component></my-component>
</div>
注意：HTML 特性不区分大小写。当使用非字符串模版时，prop的名字形式会从 camelCase 转为 kebab-case（短横线隔开）。
二、父子组件通信
组件实例的作用域是孤立的；这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。但是父子组件之间需要通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。
单向数据流这是父子组件的核心概念，prop是单向绑定的。当父组件的属性发生变化的时候，会传导到子组件。但是反之，为了防止子组件无意间修改来父组件的状态，从下往上的数据流是不允许的。
如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！
- 使用 $on(eventName) 监听事件
- 使用 $emit(eventName) 触发事件
// js
Vue.component('child', {
template: `
<div>
<spam>我是child</spam>
<button>关闭</button>
</div>
`
})
new Vue({
el: '#parent',
data: {
visible: false
}
})
// HTML
<div id="parent">
<button @click="visible=true">打开</button>
<child v-show="visible"></child>
</div>
当点击打开按钮的时候，child将会显示出来，那要将它关闭怎么办呢？child是不能关闭自己的，因为它是否显示是由他parent决定的。我们可以通知它parent：
// js
Vue.component('child', {
template: `
<div>
<spam>我是child</spam>
<button @click="$emit('close')">关闭</button>
</div>
`
})
new Vue({
el: '#parent',
data: {
visible: false
}
})
// HTML
<div id="parent">
<button @click="visible=true">打开</button>
<child v-show="visible" @close="visible=false"></child>
</div>
这样在点击关闭按钮，会触发close事件parent会让‘visible = false’，这个时候v-show就会更新，这是响应式。
三、爷孙无法通信
在上述的列子中假设还有一个grandson
// js
Vue.component('child', {
template: `
<div>
<spam>我是child</spam>
<grandson></grandson>
</div>
`
})
Vue.component('grandson', {
template: `
<div>
<spam>我是grandson</spam>
<button @click="$emit('close')">关闭</button>
</div>
`
})
new Vue({
el: '#grandpa',
data: {
visible: false
}
})
// HTML
<div id="grandpa">
<child></child>
</div>
这个时候想让grandpa（也就是上一个列子中的parent）直接关闭grandson，不可以的。要控制grandson的可见性只能让child来
// js
Vue.component('child', {
props: ['showme'],
template: `
<div>
<spam>我是child</spam>
<grandson v-show="showme" @close="$emit('close')"></grandson>
</div>
`
})
Vue.component('grandson', {
template: `
<div>
<spam>我是grandson</spam>
<button @click="$emit('close')">关闭</button>
</div>
`
})
new Vue({
el: '#grandpa',
data: {
visible: false
}
})
// HTML
<div id="grandpa">
<button @click="visible=true">打开</button>
<child :showme="visible" @close="visible=false"></child>
</div>
就是说爷孙之间是无法通信的，只能一级一级的往上传，grandson告诉child我要关闭了，child监听close事件，然后再告诉grandpa，grandpa就会监听child。
四、兄弟组件通信
根据官方文档的教程，使用一个空的 Vue 实例作为事件总线
$on方法用来监听一个事件。
$emit用来触发一个事件。
//新建一个Vue实例作为中央事件总线
let bus= new Vue();
//监听事件
bus.$on('eventName', (val) => {
//......do something
});
//触发事件
bus.$emit('eventName', 'this is a message.');
