中央事件总线

最新推荐文章于 2022-09-09 22:44:29 发布

newway007

最新推荐文章于 2022-09-09 22:44:29 发布

阅读量202

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/newway007/article/details/103755019

版权

Vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <com-a></com-a>
        <com-b></com-b>
        <com-c></com-c>
    </div>
    <template id='coma'>
        <div>
            <h3>A组件：{{msg}}</h3>
            <button @click='sendToC'>A将msg发送给C组件</button>
        </div>

    </template>
    <template id='comb'>
        <div>
            <h3>B组件：{{msg}}</h3>
            <button @click='sendToC'>B将msg发送给C组件</button>
        </div>

    </template>

    <template id='comc'>
        <div>
            <h3>C组件：{{msg}}</h3>
            
        </div>

    </template>
<script>
var Event=new Vue();
var A={
    template:'#coma',
    data(){
        return {
            msg:'A传递给C的msg'
        }
    },
    methods:{
        sendToC(){
            Event.$emit('data-a',this.msg)
        }
    }
}

var B={
    template:'#comb',
    data(){
        return {
            msg:'B传递给C的msg'
        }
    },
    methods:{
        sendToC(){
            Event.$emit('data-b',this.msg)
        }
    }
}

var C={
    template:'#comc',
    data(){
        return {
            msg:''
        }
    },
    mounted(){
        Event.$on('data-a',msg=>{
            this.msg=msg
        });
        Event.$on('data-b',msg=>{
            this.msg=msg
        });
    }
}

var vm=new Vue({
    el:'#app',
    components:{
        'com-a':A,
        'com-b':B,
        'com-c':C
    }
})




</script>
    
</body>
</html>

vue中的bus传值;

import Vue from "vue"

// 将bus挂载到原型上

const bus = {

install(Vue,options){

Vue.prototype.$bus = new Vue()

}};Vue.use(bus);

值得一提的是,bus也是一个Vue实例;

挂载后,如何使用起来呢?

监听者:

created(){

this.$bus.$on("test",function () {

alert(1)

})

}

发布者:

handleClick(){

this.$bus.$emit("test");

}

newway007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
中央事件总线

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫

专栏目录