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

最新推荐文章于 2024-03-04 11:16:13 发布

weixin_34060741

最新推荐文章于 2024-03-04 11:16:13 发布

阅读量77

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5afc3fcd5188251cee0c79a3

版权

使用总线机制（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>
复制代码

优惠劵

weixin_34060741

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习小札——2.7 非父子组件间的传值

使用总线机制（bus/发布订阅模式/观察者模式）实现非父子组件间的传值。&lt;body&gt; &lt;div id="app"&gt; &lt;child content="dell"&gt;&lt;/child&gt; &lt;child content="lee"&gt;&lt;/child&gt; &lt;/di
复制链接

扫一扫