效果图如下:
原理:子组件间通过第三方实例化一个vue,再通过此vue的$ emit()发射事件,与$ on()事件监听 通过参数来进行数据传递:
首先我们实例化一个vue:
bus.js文件:
import Vue from 'vue';
export default new Vue();
我们介绍两个子组件的父组件写法:
AB父组件:
<template>
<div class="home">
<h1>外面是这是AB父组件</h1>
<A></A>
<B></B>
</div>
</template>
<script>
import A from './A';
import B from './B';
export default {
name: 'AB',
components: {
A,
B
},
data(){
return{
des:'外面是这是AB父组件'
}
}
}
</script>
<style>
</style>
我们通过子组件A发射事件:
子组件A:
<template>
<div class="A">
<h3>这是子组件A</h3>
<button @click="handleSend">改变数据</button>
<h1>{{num}}</h1>
</div>
</template>
<script>
import Bus from '../../src/utils/bus.js'
export default{
data(){
return{
num: 0
}
},
methods:{
handleSend(){
this.num = this.num + 1;
//发送事件 $emit('事件名', 参数)
Bus.$emit('send', this.num);
}
}
}
</script>
<style scoped>
.A{
width: 200px;
height: 100px;
margin: 10px auto;
background-color: antiquewhite;
}
</style>
我们通过子组件B监听事件:
子组件B:
<template>
<div class="B">
<h3>这是子组件B</h3>
<h1>{{num}}</h1>
</div>
</template>
<script>
//引入事件车所在的Vue实例中
import Bus from '../../src/utils/bus.js'
export default{
data(){
return{
num:0
}
},
//通过生命周期函数created监听事件
created(){
Bus.$on('send',(num)=>{
this.num = num
})
}
}
</script>
<style scoped>
.B{
width: 200px;
height: 100px;
margin: 10px auto;
background-color: aqua;
}
</style>
这样就可以如效果图一样通信啦!
最后我们来看一下目录结构: