非父子组件之间的传值,发布订阅模式/观察者模式/总线机制/Bus

最新推荐文章于 2024-04-21 08:25:46 发布

很小白的小白

最新推荐文章于 2024-04-21 08:25:46 发布

阅读量137

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_35401191/article/details/82884616

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一个网页可以拆分成很多组件：可以构成父子组件和兄弟组件。如果我想实现1~3之间的数据传递，不得不经过2。那有没有直接让1~3进行数据传递了（给他们开出新通道）。又比如3~3之间传递数据。

第一种：在Vue中有一个数据框架VueX

第二种：发布订阅模式/观察者模式/总线机制

主要来说第二种方式：总线机制。

<div id="app">
        <foo content='Bai'></foo>
        <foo content='Feng'></foo>
    </div>

//以下Script 代码
Vue.prototype.bus = new Vue() //整个实例挂在bus上。
Vue.component('foo', {
    props: {
        content: String
    },
    data:function(){
        return{
            num:this.content
        }
    },
    template: '<div @click="Click">{{num}}</div>',
    methods: {
        Click: function () {
            this.bus.$emit('change',this.num)
        }
    },
    mounted:function(){//声明周期函数，监测
        var _slef = this;
        this.bus.$on('change',function(msg){
            _slef.num = msg;
        })
    }

})
var vm = new Vue({
    el: '#app',
})