上篇文章主要介绍了父子组件之间的通信,兄弟组件之间的通信在文末稍微提了一下。
什么是兄弟组件呢?
就是被同一个父组件调用的的子组件,就好比父母有几个孩子,这几个孩子就是兄弟姐妹关系一样,很好理解。
兄弟组件之间的通信,今天主要介绍两种方法。
通过父组件转达和事件车。
- 父组件转达
这种方法一般适用于逻辑比较简单的值传递。
比如,页面A调用了两个组件C1和C2。C1想给C2发送数据,我们可以先把数据发送给父组件,也就是A页面,A页面再把值发送给C2。
C1 → A → C2
C2 → A → C1
通过父组件转达这种方法就好比兄弟两个不说话,有事的时候,直接告诉父母,父母再去转达。写个例子。
C1组件:
mounted: function () {
this.$emit('getName',"刘小妞")
}
A页面(父组件)
//html
<C2 :topName="topName" />
<C1 v-on:getName="setTopName"/>
//js
<script>
import C1 from '~/components/C1.vue'
import C2 from '~/components/C2.vue'
export default {
data() {
return {
topName:''
};
},
components: {
C1,
C2
},
methods: {
setTopName(data){
this.topName = data
}
}
}
</script>
C2组件:
//html
<div>{{topName}}</div>
//js
<script>
export default {
props:{topName:String},
}
</script>
- 事件车
事件车是不需要通过父组件的,两兄弟直接通信。
只不过,两兄弟需要一个共同的JS,我们把这个共同的JS称为事件车。写个例子就明白了。
新建一个JS文件,取名eventBus.js。随便放一个地方就行,我放在了plugins目录下。内容如下:
import Vue from 'vue'
export default new Vue()
然后,兄弟组件里都需要引用这个JS。
C1组件:
<script>
import eventBus from '~/plugins/eventBus'
mounted: function () {
eventBus.$emit('getName',"刘小妞")
}
</script>
C2组件:
//html
<div>{{topName}}</div>
//js
<script>
import eventBus from '~/plugins/eventBus'
export default {
data() {
return {
topName:''
}
},
created() {
eventBus.$on('getName',(message)=>{
this.topName = message
})
},
}
</script>
其他关于前端知识的文章,欢迎微信搜索公众号:“刘小牛的栖息地”或者微信识别下图的二维码查看,感谢大家的支持。