首页 > 代码库 > 组件之间的通讯：兄弟组件之间的相互通讯（中央事件总线）

组件之间的通讯：兄弟组件之间的相互通讯（中央事件总线）

2024-11-25 11:57:39   203人阅读

技术分享

组件之间的通讯：

父->子:通过props,data属性，

子->父：通过派发事件

兄弟组件：中央事件总线（......data{ Bus:new Vue()}.....）

更为复杂的通讯：就是用vuex

关于兄弟组件之间的通讯官档上推荐使用中央事件总线，我们也确实是这样做的，

中央事件总线，其实就是在父组件data中在实例化话一个vue实例，用于管理组件之间的通讯

假设我们有一个组件A,和B,他们之间的要进行数据通讯，那么他们之间肯定要建立某种联系，这个联系人就是父组件，联系地址就是中央事件总线

然后A,$emit一个信息，B就$on监听这个信息

 

直接上上例子：

首先先建立一个父组件：

    const myVue=new Vue({
        el:‘#app‘,
        data:{
            Bus:new Vue(),//中央事件总线
        },
        components:{
            myF1:c1,//子组件c1
            myF2:c2//子组件c2
        }
    });

给出子组件的代码：

    const c1={
        template:`<div>
            <p>this is c1 组件</p>
            <span></span>
            </div>`,
        created(){//组件的钩子函数
          this.$root.Bus.$on(‘你的名字‘,value=http://www.mamicode.com/>{
              this.add(value);
          });
        },
        methods:{
            add(value){
                console.log(value+100);
            }
        },
        beforeDestory(){//组件的钩子函数
            this.$root.Bus.$off("你的名字");
        }
    };

    const c2={
        template:`
            <div>
             <p>this is c2 组件</p>
             <p >
                <button @click="submit">改变</button>
            </p>
             <span></span>
           </div>`,
        methods:{
            submit(){
              //  this.$root.Bus.$emit(‘eventName‘,123);
                this.$parent.Bus.$emit(‘你的名字‘,123);
            },
        },
    };

组件B，，通过父组件的中央事件总线，$emit派发一个事件"你的名字",以及传递一个参数，兄弟组件A,通过父组件的中央事件总线$on，监听那个派发的事件，并接受那个参数。

没任何问题。。。。。。

给出代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非父子组件之间的通信(中央事件总线)</title>
    <script src=http://www.mamicode.com/"../lib/vue.js"></script>
</head>
<body>
    <div id="app">

        <my-f1></my-f1>
        <my-f2></my-f2>
    </div>
</body>
</html>
<script>
    const c1={
        template:`<div>
            <p>this is c1 组件</p>
            <span></span>
            </div>`,
        created(){
          this.$root.Bus.$on(‘你的名字‘,value=http://www.mamicode.com/>{
              this.print(value);
          });
        },
        methods:{
            print(value){
                console.log(value);
            }
        },
        beforeDestory(){
            this.$root.Bus.$off("你的名字");
        }
    };

    const c2={
        template:`
            <div>
             <p>this is c2 组件</p>
             <p >
                <button @click="submit">改变</button>
            </p>
             <span></span>
           </div>`,
        methods:{
            submit(){
              //  this.$root.Bus.$emit(‘eventName‘,123);
                this.$parent.Bus.$emit(‘你的名字‘,123);
            },
        },
    };
    const myVue=new Vue({
        el:‘#app‘,
        data:{
            Bus:new Vue(),
        },
        components:{
            myF1:c1,
            myF2:c2
        }
    });
</script>

 

组件之间的通讯：兄弟组件之间的相互通讯（中央事件总线）


联系
我们