组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件意味着协同工作，组件与组件的通讯是必然的，那么vue的组件间通讯是怎么样的呢？
父子组件通讯
通常父子组件会是这样的关系：组件 A 在它的模版中使用了组件 B。它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。
vm.$parent
父实例，如果当前实例有的话。
子组件可以通过$parent访问父组件的数据；
栗子
//假设父组件有一个message
data(){
return {
message: 'hello'
}
}
Vue.component('child', {
template: '<span>{{ this.$parent.message }}</span>'
})
<!-- 渲染结果 -->
<span>hello</span>
组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的 props 选项。
prop
组件的实例的独立存在，所以子组件是无法直接访问父组件的实例。子组件通过props来获取父组件传递的数据。
官方栗子
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像“this.message”这样使用
template: '<span>{{ message }}</span>'
})
父组件
<child message="hello!"></child>
这里需要注意两点
- prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。
- 在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态
简单的说就是我们在子组件不应该去改变prop的数据，即使我们可以传递数组或对象作为prop，进而改变数据去改变父组件！
如何正确利用prop
正常情况下，子组件需要获取prop通常有三种原因：
- prop 作为初始值传入后，子组件仅作为展示数据使用；
- prop 作为初始值传入后，子组件想把它当作局部数据来用；
- prop 作为初始值传入，由子组件处理成其它数据输出；
下面是三种情况的正确的打开方式
// 1、 prop 作为初始值传入后，直接渲染
Vue.component('child', {
props: ['initialCounter'],
template: '<span>{{ initialCounter }}</span>'
})
// 2、 定义一个局部变量，并用 prop 的值初始化它：
Vue.component('child', {
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
})
// 3、 定义一个计算属性，处理 prop 的值并返回。
Vue.component('child', {
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
})
上面的的方式都是有官方提供，但是对于第二种方式我并不完全认同！正如前面提到的注意点（在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态），即使用prop初始化了一个局部变量，如果这个prop是对象或者数据，那么这个局部变量与prop仍然指向同一个内存空间！
下面的结果就是通过定义一个局部变量，并用 prop 的值（object）初始化它，然后修改局部变量的结果：
在线演示
tips：如果需要将prop作为局部变量使用，又不希望影响父组件，那么可以使用深克隆的方法进行赋值。最简单的方法是JSON.parse(JSON.stringify(value));,深克隆后，无论是对象还是数组都不会再指向同一个内存空间，它们将是独立的存在。结果如下：
在线演示
自定义事件
在父子组件中，子组件是通用过自定义事件来把数据传回给父组件。
每个 Vue 实例都实现了事件接口 (Events interface)，即：
- 使用 $on(eventName) 监听事件
- 使用 $emit(eventName) 触发事件
子组件通过$emit来向上触发父组件的事件；
父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
不能用 $on 侦听子组件抛出的事件，而必须在模板里直接用 v-on 绑定
也就是说在父子组件中，父组件必须在模板中对子组件使用'v-on'绑定事件，否则无法监听到子组件通过$emit抛出的事件
官方栗子
<div id="counter-event-example">
<p>{{ total }}</p>
//必须使用v-on绑定自定义事件
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
Vue.component('button-counter', {
template: '<button v-on:click="increment">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
increment: function () {
this.counter += 1
//触发父组件的incrementTotal事件
this.$emit('increment')
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})
.sync 修饰符
.sync 修饰符，它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 侦听器。
也就是说使用.sync，相当于把父组件需要做的事情都隐式的做完了，子组件想要改变父组件的数据，只需要通过$emit来触发就可以了。
例如下面这个：
<button-counter :counter.sync="total"></button-counter>
会被隐式的拓展为
<button-counter :counter="total" @update:counter="val => total = val"></button-counter>
完整的栗子
<div id="counter-event-example">
<button-counter counter.sync="total"></button-counter>
</div>
Vue.component('button-counter', {
template: '<button v-on:click="increment">{{ counter }}</button>',
props:['counter']
data: function () {
return {
myCounter: this.counter
}
},
methods: {
increment: function () {
this.myCounter += 1
this.$emit('update:counter', this.myCounter)
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
}
})
这个栗子跟自定义事件的官方栗子是一样的效果。
非父子组件通讯
两个非父子组件通讯，可以使用一个空的vue实例来做事件总线，在这个实例上定义和监听自定义事件。
栗子
//空的Vue实例作为事件总线
var eventBus = new Vue({});
//componenta 组件
var componenta = {
template: '<div><p>componenta接收到的信息是： <span class="myclass" v-text="text"></span></p><input v-model="sendData"></input><button @click="sendMessage">send to b</button></div>',
data: function() {
return {
sendData: '',
text: ''
}
},
methods: {
sendMessage: function() {
// 触发事件
eventBus.$emit('sendToB', this.sendData)
}
},
mounted: function() {
eventBus.$on('sendToA', (data)=> {
this.text = data
})
}
}
在线演示
vuex
未完待续
