父组件 → 子组件
组件实例的作用域都是孤立的，也就是子组件在模板 template 不能引用父组件的数据，那么，当子组件有需要使用父组件的时候，我们该怎么办呢？
这里我们使用的是组件的 props 选项来声明它想要得到的数据。
首先创建一个 vue 实例：
<div id="app"></div>
<script>
const app = new Vue({
el: '#app',
data: {
msg: '我是父组件的数据'
}
})
</script>
实例 app 中含有数据 msg 值为“我是父组件的数据”，待会我们把它传递给子组件。
子组件还没有注册，接下来，我们就注册一个组件，组件名为 son。
<div id="app">
<son></son>
</div>
Vue.component('son', {
template: `<div></div>`
})
子组件准备好了，下一步就开始传递数据，父组件向子组件传递参数，我们说过，用组件提供的 props 选项，接下来，我们就把父组件的 msg 传给 子组件，并展示在页面上。
上面代码稍加修改：
<div id="app">
<son :message="msg"></son>
</div>
Vue.component('son', {
props: ['message'],
template: `<div>{{ message }}</div>`
})
效果如下：
效果图.png
注意：props 是单向绑定的（父→子），是 vue 为了防止子组件无意修改了父组件得数据和状态，如果多个子组件任意地对父组件进行修改，这会让整个应用得数据流难以阅读。
如果你想要修改父组件传过来得数据，最好是定义一个局部的变量，来依赖传过来的数据。
子组件 → 父组件
相比父→子组件通信，子→父组件就稍微繁琐一点，我们会使用到组件的一个知识点：自定义事件。
每一个 vue 实例都实现了事件接口，我们可以用它提供的 API $emit(eventName) 来触发一个事件。
首先注册一个新组件：
Vue.component('son', {
template: `<button @click="send">
点击
</button>`,
methods: {
send() {
this.$emit('connect')
}
}
})
很简单的一个组件，就是一个按钮 button，点击它的时候，会触发组件内部的 send() 方法，而方法里面会触发一个事件，事件名取为：connect
然后我们就去父组件监听这个事件“connect”，监听方式跟普通原生的事件一模一样，也是用 v-on 指令，缩写用 @ 符号。我们采用缩写来监听：
<div id="app">
<son @connect="say"></son>
</div>
我们设置了事件 connect 触发的处理程序是一个 say() 方法，我们补上 say() 方法的定义：
const app = new Vue({
el: '#app',
methods: {
say() {
console.log('大家好，我监听到了事件connect的触发')
}
}
})
我们在 say() 方法触发的时候，在控制台打印一句话，表示我们自定义的事件 connect() 成功触发，并被父组件监听到了。
效果如下：
效果图.png
接下来就是把子组件的数据传递给父组件。
Vue.component('son', {
template: `<button @click="send">点击</button>`,
data() {
return {
msg: '大家好，我是子组件的数据'
}
},
methods: {
send() {
this.$emit('connect', this.msg)
}
}
})
我们把子组件的 data 中的 msg，通过 $emit() 一并发射出来，在父组件的 say() 方法接受即可。
methods: {
say(msg) {
console.log(msg)
}
}
效果如下：
效果图.png
非父子组件通信
除了父子组件的相互通信，非父子关系的组件该如何通信，我们可以巧妙 地利用一个空的 vue 实例来作为一个中央事件总线。
但是在事件开发中，我们不会这么做，我们会使用专门用于状态管理的 vuex，vuex 的学习我们在后面学习。
网友评论