Vue 组件间的通信
什么是Vue组件？
组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
组件关系
上面展示的图片可以引入所有 Vue 组件的关系形式：
- A 组件和 B 组件、B 组件和 C 组件、B 组件和 D 组件形成了父子关系
- C 组件和 D 组件形成了兄弟关系
- A 组件和 C 组件、A 组件和 D 组件形成了隔代关系（其中的层级可能是多级，即隔多代）
组件通信
1、props 和 $emit
使用props，父组件可以使用props向子组件传递数据。
父组件
<template>
<son :message="son"></son>
</template>
<script>
import son from './son.vue';
export default {
components: {
son
},
data () {
return {
message: 'father message';
}
}
}
</script>
子组件
<template>
<div>{{message}}</div>
</template>
<script>
export default {
/**
* 得到父组件传递过来的数据
* 这里的定义最好是写成数据校验的形式，免得得到的数据是我们意料之外的
*
* props: {
* message: {
* type: String,
* default: ''
* }
* }
*
*/
props:['message'],
}
</script>
父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件。
父组件
<template>
<son @getChildData="getChildData"></son>
</template>
<script>
import son from './son.vue';
export default {
components: {
son
},
methods: {
// 执行子组件触发的事件
getChildData(val) {
console.log(val);
}
}
}
</script>
子组件
<template>
<div>
<input type="text" v-model="myMessage" @input="passData(myMessage)">
</div>
</template>
<script>
export default {
props: {
msg: {
type: String,
required: true
}
},
data() {
return {
// 这里是必要的，因为你不能直接修改 props 的值
myMessage: this.message
}
},
methods () {
passData(val) {
// 数据状态变化时触发父组件中的事件
this.$emit('getChildData', val);
}
}
}
</script>
在上面的例子中，有父组件 father 和子组件 son。
- 父组件传递了 message 数据给子组件，并且通过v-on绑定了一个 getChildData 事件来监听子组件的触发事件；
- 子组件通过 props 得到相关的 message 数据，然后将数据缓存在 data 里面，最后当属性数据值发生变化时，通过 this.$emit 触发了父组件注册的 getChildData 事件处理数据逻辑。
2、$attrs 和 $listeners
第一种方式处理父子组件之间的数据传输有一个问题：如果父组件A下面有子组件B，组件B下面有组件C,这时如果组件A想传递数据给组件C怎么办呢？
如果采用第一种方法，我们必须让组件A通过prop传递消息给组件B，组件B在通过prop传递消息给组件C；要是组件A和组件C之间有更多的组件，那采用这种方式就很复杂了。Vue 2.4开始提供了$attrs和$listeners来解决这个问题，能够让组件A之间传递消息给组件C。
-
$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。 -
$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
父组件
<template>
<div>
<p>我是父组件</p>
<son :son="son" :grandSon="grandSon" @getSonData="getSonData" @getGrandSonData="getGrandSonData"></son>
</div>
</template>
<script>
import son from './son.vue';
export default {
components: {
son
},
data() {
return {
son: '爷爷的儿子',
grandSon: '爷爷的孙子'
}
},
methods: {
// 来自子组件触发的事件
getSonData(val) {
console.log(val)
},
// 来自孙组件触发的事件
getGrandSonData(val) {
console.log(val)
}
}
}
</script>
子组件
<template>
<div>
<p>我是子组件</p>
<input type="text" v-model="myMessage" @input="passData(myMessage)">
<grandson :child="child" v-bind="$attrs" v-on="$listeners"></grandson>
</div>
</template>
<script>
import son from './son.vue';
export default {
components: {
grandson
},
props: ['son'],
data() {
return {
child: '爸爸的儿子',
myMessage: ''
}
},
// 默认为true，如果传入的属性子组件没有prop接受，就会以字符串的形式出现为标签属性
// 设为false，在dom中就看不到这些属性，试一下就知道了
inheritAttrs: false,
created () {
// 在子组件中打印的$attrs就是父组件传入的值，刨去style,class,和子组件中已props的属性
console.log(this.$attrs) // 打印爷爷的孙子
},
methods:{
passData(val) {
// 触发父组件中的事件
this.$emit('getSonData', val)
}
}
}
</script>
孙组件
<template>
<div>
<p>我是孙组件</p>
<input type="text" v-model="myMessage" @input="passData(myMessage)">
{{$attrs.grandSon}}
{{$attrs.child}}
</div>
</template>
<script>
export default {
data() {
return {
myMessage: ''
}
},
inheritAttrs: false,
created () {
// 打印爷爷的孙子和爸爸的儿子
console.log(this.$attrs)
},
methods:{
passData(val) {
// 触发父组件中的事件
this.$emit('getGrandSonData', val)
}
}
}
</script>
在上面的例子中，我们定义了 父，子，孙 三个组件，其中组件子是组件父的子组件，组件孙是组件子的子组件。
- 孙组件中能直接触发getGrandSonData的原因在于子组件调用孙组件时 使用 v-on 绑定了$listeners 属性
- 通过v-bind 绑定$attrs属性，孙组件可以直接获取到父组件中传递下来的props(除了子组件中props声明的)
3、v-model
父组件通过v-model传递值给子组件时，会自动传递一个value的prop属性，在子组件中通过this.$emit(‘input', val)自动修改v-model绑定的值
父组件
<template>
<div>
<p>我是父组件</p>
{{message}}
<son v-model="message"></son>
</div>
</template>
<script>
import son from './son.vue';
export default {
components: {
son
},
data() {
return {
message: '我的儿子'
}
}
}
</script>
子组件
<template>
<div>
<p>我是子组件</p>
<input type="text" v-model="myMessage" @input="passData(myMessage)">
</div>
</template>
<script>
export default {
//v-model会自动传递一个字段为value的prop属性
props: ['value'],
data() {
return {
myMessage: this.message
}
},
methods:{
passData(val) {
//通过如此调用可以改变父组件上v-model绑定的值
this.$emit('input', val)
}
}
}
</script>
在上面的实例代码中，我们定义了 father 和 son 两个组件，这两个组件是父子关系，v-model 也只能实现父子组件之间的通信。
- 在 father 组件中，我们给自定义的 son 组件实现了 v-model 绑定了 message 属性。此时相当于给 son 组件传递了 value 属性和绑定了 input 事件。
- 在定义的 son 组件中，可以通过 props 获取 value 属性，根据 props 单向数据流的原则，又将 value 缓存在了 data 里面的 myMessage 上，再在 input 上通过
v-model绑定了 myMessage 属性和一个 input 事件。当 input 值变化时，就会触发 input 事件，处理 father 组件通过v-model给 son 组件绑定的input事件，触发 father 组件中message属性值的变化，完成child子组件改变 father 组件的属性值。
4、provide和inject
父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，只要在父组件的生命周期内，子组件都可以调用。
父组件
<template>
<div>
<p>我是父组件</p>
</div>
</template>
<script>
export default {
provide:{
message: '中午一起吃饭'
}
}
</script>
子组件
<template>
<div>
<p>我是子组件</p>
{{message}} //会显示中午一起吃饭
</div>
</template>
<script>
export default {
inject:['message'],//得到父组件传递过来的数据
}
</script>
在上面的实例中，我们定义了组件 father 和组件 son，组件 father 和组件 son 是父子关系。
- 在 father 组件中，通过
provide属性，以对象的形式向子孙组件暴露了一些属性 - 在 son 组件中，通过
inject属性注入了 father 组件提供的数据，实际这些通过inject注入的属性是挂载到 Vue 实例上的，所以在组件内部可以通过 this 来访问。
5、$parent 和 $children
这里要说的这种方式就比较直观了，直接操作父子组件的实例。$parent 就是父组件的实例对象，而 $children 就是当前实例的直接子组件实例了，不过这个属性值是数组类型的，且并不保证顺序，也不是响应式的。
父组件
<template>
<div>
<p>我是父组件</p>
<button @click="changeChildValue">test</button>
<son></son>
<grandson></grandson>
</div>
</template>
<script>
import son from './son.vue'
import grandson from './grandSon.vue'
export default {
components: {
son,
grandSon
},
data() {
return {
fatherMessage: ''
}
}
methods: {
changeChildValue(){
this.$children[0].sonMessage = 'hello';
}
}
}
</script>
子组件
<template>
<div>
<p>我是子组件</p>
<input type="text" v-model="mymessage" @change="changeValue" />
</div>
</template>
<script>
export default {
data() {
return {
mymessage: this.$parent.fatherMessage
}
},
methods: {
changeValue(){
this.$parent.fatherMessage = this.mymessage;//通过如此调用可以改变父组件的值
}
}
}
</script>
在上面实例代码中，分别定义了 father 和 son 组件，这两个组件是直接的父子关系。两个组件分别在内部定义了自己的属性。在 father 组件中，直接通过
this.$children[0].sonMessage = 'hello'; 给 son 组件内的 sonMessage 属性赋值，而在 son 子组件中，同样也是直接通过this.$parent.fatherMessage 给 father 组件中的 fatherMessage 赋值，形成了父子组件通信。6、 中央事件总线
对于父子组件之间的通信，上面的两种方式是完全可以实现的，但是对于两个组件不是父子关系，那么又该如何实现通信呢？在项目规模不大的情况下，完全可以使用中央事件总线 EventBus 的方式。
在组件之外定义一个bus.js作为组件间通信的桥梁，适用于比较小型不需要vuex又需要兄弟组件通信的
1. bus.js中添加如下
import Vue from 'vue' export const Bus = new Vue();
2.组件中调用bus.js通过自定义事件传递数据
import Bus from './bus.js' export default { methods: { bus () { Bus.$emit('msg', '我要传给兄弟组件们') } } }
3.兄弟组件中监听事件接受数据
import Bus from './bus.js' export default { mounted() { Bus.$on('msg', (e) => { console.log(e) }) } }
中央事件总线 EventBus 非常简单，就是任意组件和组件之间打交道，没有多余的业务逻辑，只需要在状态变化组件触发一个事件，然后在处理逻辑组件监听该事件就可以。
浙公网安备 33010602011771号