阅读 91

Vue学习小札——2.7 非父子组件间的传值

使用总线机制(bus/发布订阅模式/观察者模式)实现非父子组件间的传值。

<body>
  <div id="app">
    <child content="dell"></child>
    <child content="lee"></child>
  </div>
     
  <script>
   //给Vue的prototype绑定一个bus
   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 vm = new Vue({
     el: "#app", 
   });
  </script>
</body>
复制代码