vuejs非父子组件传值

当父组件要给孙子,或者孙子与孙子要传值的时候怎么传,一层一层传太麻烦了,vuejs提供了一中模式叫发布订阅模式(观察者模式,bus,总线)来处理非父子组件间的传值
<div id='root'>
  <child content = 'Dell'></child>
  <child content = 'Lee'></child>
</div>


<script>
Vue.prototype.bus = new Vue();

Vue.component('child',{
  props:{
    content:String
  },
  data:function(){
    return {
      selfContent:this.content
    }
  },
  template:'<div @click="handleClick">{{this.selfContent}}</div>',
  methods:{
    handleClick:function(){
      this.bus.$emit('change',this.selfContent)
    }
  },
  mounted:function(){////页面已经被渲染完毕了的时候被执行
    var that = this;
    this.bus.$on('change',function(msg){
      that.selfContent = msg;
    })
  }
})
var vm = new Vue({
  el:'#root',
  methods:{
    handleClick:function(){
      alert(1);
    }
  }
})
</script>

猜你喜欢

转载自www.cnblogs.com/wzndkj/p/9660225.html
今日推荐