1 .父组件
<template>
<div>
<child1/>
<child2/>
</div>
</template>
<script>
import bus from "src/bus";
export default{
components:{
child1:(resolve)=>require(["../../pages/test/child1.vue"],resolve),
child2:(resolve)=>require(["../../pages/test/child2.vue"],resolve),
},
}
</script>
2.child1.vue 第一个子组件
传值用$emit('自定义事件名', 需要传的值)
<template>
<div class="q-pa-md">
兄弟1
<q-btn @click="showPop">
点击进行传值
</q-btn>
<span v-if="show">
我是兄弟1{{show}}
</span>
</div>
</template>
<script>
import bus from "src/bus"
export default{
data(){
return{
show:false
}
},
methods:{
showPop(){
this.show=!this.show
bus.$emit("show",this.show)
}
}
}
</script>
3.child2.vue第二个子组件
接收用$on("传过来的自定义时间名",(data)=>{ data是传过来的参数 在这里进行操作 })
<template>
<div>
兄弟2
<span v-if="show">
我是兄弟2{{show}}
</span>
</div>
</template>
<script>
import bus from "src/bus"
export default {
data(){
return{
show:false
}
},
created(){
bus.$on("show",(data)=>{this.show=!data})
}
}
4.在src 目录下 新建文件 bus.js
import Vue from "vue"
const bus = new Vue()
export default bus