vue --- > 使用中央事件总线(bus)实现跨组件通信

最新推荐文章于 2024-09-17 11:26:17 发布

栗子好好吃

最新推荐文章于 2024-09-17 11:26:17 发布

阅读量857

点赞数

分类专栏： Vue 文章标签：事件发布和订阅的形式解耦

Vue 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

使用Bus实现跨组件传输须注意以下3点:
1.需要创建一个空的Vue实例(bus),来作为中间站
2.使用bus. $e m i t 来发送事件 3 . 使用 b u s .$ on来监听事件(在钩子created中监听)

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<div id="app">
    <p>{{ message }}</p>
    <my-component></my-component>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
    
    const bus = new Vue({});
    
    Vue.component('my-component',{
        template:'<button @click="sendMessage">派发事件</button>',
        methods:{
            sendMessage:function() {
                bus.$emit('on-message', '使用bus派发的事件');
            },
        }
    })
    const app = new Vue({
        el:'#app',
        data:{
            message: ''
        },
        mounted:function(){
            let self = this;
            
            bus.$on('on-message',function(msg){
                self.message = msg;
            })
        }
    })
</script>
</body>
</html>

在这里插入图片描述
参考《Vue.js实战》P80