事件总线 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',{ //组件1
template:'#tp1',
data(){
return{
show:true,
}
},
methods:{
toggle1(){
this.show =!this.show
}
},
created(){
console.log(vm);
vm.$on('hehe',this.toggle1)
},
})
Vue.component('tp2',{ //组件2
template:'#tp2',
methods:{
toggle(){
vm.$emit('hehe')
}
}
})
new Vue({
el:'#app',
data:{
}
})
/*
事件总线 eventbus
1.创建一个空的vue实例对象
2.通过vue 里的$on 可以注册一个事件
3.通过vue 里的$emit 可以触发注册的事件
*/
</script>
</body>