vue非亲兄弟组件之间的通信,事件总线 eventbus

72 阅读1分钟

事件总线 eventbus

1.创建一个空的vue实例对象

2.通过vue 里的 $on 可以注册一个事件

3.通过vue 里的 $emit 可以触发注册的事件

下面试通过一个组件来控制另一个组建的显示隐藏,经供参考

  <body>
    <div id="app"><tp1></tp1><tp2></tp2></div><!-- 组件模板1 --><template id="tp1">
        <div>
            <div class="demo" v-if="show"></div></div></template>
    <!-- 组件模板2 --><template id="tp2">
        <div ><button @click="toggle">toggle</button></div></template>
    <script>let vm = new Vue()  //创建空的vue实例对象Vue.component('tp1',{  //组件1template:'#tp1',
​            data(){
​                return{
​                    show:true,
​                }
​            },
​            methods:{
​               toggle1(){
​                this.show =!this.show
​              }
​            },
​            created(){
​              console.log(vm);
​              vm.$on('hehe',this.toggle1)
​            },
​        })
​        Vue.component('tp2',{  //组件2template:'#tp2',
​            methods:{
​                toggle(){
​                    vm.$emit('hehe')
​                }
​            }
​        })
​        new Vue({
​            el:'#app',
​            data:{
​            }
​        })
​        /* 
​        事件总线    eventbus
​          1.创建一个空的vue实例对象
​          2.通过vue 里的$on 可以注册一个事件
​          3.通过vue 里的$emit  可以触发注册的事件
​        */</script>
</body>