M87星云

导航

VUE非父子组件之间的通信

利用$emit $on的触发和监听事件实现非父子组件的通信
Vue.prototype.$bus=new Vue()//在vue上面挂载一个$bus作为中央处理组件
this.$bus.$emit('自定义事件名','传递的数据')//触发自定义事件传递数据
this.$bus.$on('自定义事件名'，fn)//监听自定义事件获取数据

具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <heads></heads>
    <bodys></bodys>
    <floor></floor>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

    //bus总线
    Vue.prototype.$bus = new Vue();

    var heads = {
        template:`
            <div>
                我是头部: <button @click="clickSay">点击底部显示消息</button>
            </div>
        `,
        methods: {
            clickSay(){
                // 触发事件
                this.$bus.$emit("floorSay","hello Floor!");
            }
        }
    }
    var bodys = {
        template:`
            <div>我是身体</div>
        `
    }

    var floor = {
        template:`
            <div>
                我是底部
                <p>{{name}}</p>
            </div>
        `,
        data(){
            return {
                name:""
            }
        },
        created() {
            // 监听触发的事件
            this.$bus.$on("floorSay",val=>{
                this.name = val;
            });
        }
    }

    new Vue({
        el:"#app",
        components:{
            heads,
            bodys,
            floor
        },
        data:{
            n: 0
        },
        methods:{
            addnum(){
                this.n++;
            }
        }
    });

</script>
</html>

 

 总结：非父子组件通信 解决的方案还有vuex、provide/inject是解决同根往下派发、本地存储也可以进行非父子组件之间的通信！

posted on 2022-01-13 19:49  挽留匆匆的美丽  阅读(184)  评论(0)  编辑  收藏  举报