公交事件总线bus

最新推荐文章于 2023-08-10 17:35:55 发布

success_on

最新推荐文章于 2023-08-10 17:35:55 发布

阅读量286

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/a2690656046/article/details/117510887

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

公交事件总线:

1.创建事件总线,就是实例化一个空Vue对象赋值给一个变量
2.通过这个对象调用. $e m i t (^{'} 消息名^{'},^{'} 值^{'}) 发布消息 3 . 使用 .$ on(‘消息名’,处理函数) 用来监听
4. .$off(‘消息名’) 销毁*

1.创建事件总线,就是实例化一个空Vue对象赋值给一个变量
2发布 bus.$emit
3监听

var bus = new Vue()
        Vue.component('wxauthor',{
            template:`
                <div>
                    <input type='text' ref='neirong'/>
                    <button @click='setwx'>发布</button>
                </div>
            `,
            methods:{
                setwx(){
                    // 2发布 bus.$emit
                    bus.$emit('wxtext',this.$refs.neirong.value)
                }
            }
        })

        Vue.component('wxuser',{
            template:`
                <div>
                    用户接收
                </div>
            `,
            mounted(){
                //生命周期函数,到组件的dom被渲染完成后,自动执行
                
                //3监听
                bus.$on('wxtext',(da)=>{
                    console.log(da)
                })
               
            },
 	destroyed(){
	//防止组件创建销毁几次后会重复调用,在这里可以销毁
                bus.$off('wxtext')
            }
        })

        new Vue({
            el:'#box'
        })