vue 非父子组件传值

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36918222/article/details/82749959

本文使用的是总线/发布订阅模式/观察者模式

html

<div id="app">
    <div is="child" content="zhangsan"></div>
    <div is="child" content="lisi"></div>

</div>

js

Vue.prototype.bus = new Vue();
Vue.component('child',{
    props:{
        content:String
    },
    data:function(){
      return {
          selfContent:this.content
      }
    },
    template:'<div @click="handleClick">{{selfContent}}</div>',
    methods:{
        handleClick:function(){
            this.bus.$emit('change',this.selfContent)
        }
    },
    mounted:function(){
        var this_ = this;
        this.bus.$on('change',function(msg){
            this_.selfContent = msg;
        })
    }
})
var app = new Vue({
    el:'#app'
})