当前位置：网站首页>组件传值：兄弟间传值（非父子组件进行传值）

组件传值：兄弟间传值（非父子组件进行传值）

2022-06-21 22:04:00 【Nancy-sn】

非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值。

当调用send触发bus的aa自定义事件，bus上绑定的事件，一旦触发emit，bus.$on将被触发接收到msg赋给this.msg

<!DOCTYPE html>
<html>
<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></title>
</head>
<body>
<div id="app">
    <tab1></tab1>
    <tab2></tab2>       
</div>

</body>
</html>
<script src="./js/vue.js"></script>
<script>
    const bus= new Vue();//非父子传值（兄弟传值）
    //兄弟组件1
    Vue.component("tab1",{
        template:`
        <div>tab1 <button @click="send">点击</button> </div>
        `,
        data(){
            return{
                msg:"tab1"
            }
        },
        methods:{
            send(){
                //出发自定义aa事件，携带了数据
                bus.$emit("aa",this.msg);
            }
        },
    });
    //兄弟组件2
    Vue.component("tab2",{
        template:`
        <div>tab2 {
   {msg}}</div>
        `,
        data(){
            return{
                msg:""
            }
        },
        //挂载的构造函数
        mounted(){
            //给hug绑定"aa"的事件
            bus.$on("aa",(msg)=>{
                this.msg=msg;
            })
        },
    });
new Vue({
    el: "#app",
    data: {
    
    }
})
</script>

运行后：