非父子组件的传值问题

1、Bus/总线/发布订阅模式/观察者模式的方法;
2、Vuex方法;

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>非父子组件间传值(Bus/总线/发布订阅模式/观察者模式)</title>
  <script src='./vue.js'></script>
</head>

<body>
  <div id="app">
    <child content="puxiaotao"></child>
    <child content="cc"></child>
  </div>

  <script>
    Vue.prototype.bus = new Vue()
    Vue.component('child', {
      data: function() {
        return {
          selfContent: this.content
        }
      },
      props: {
        content: String
      },
      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>

</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 重点啊!!当初学这个时候,纠结了好一会儿。先来看看组件关系。 可以把一个网页拆分成很多部分,如图所示,可以理解为一...
    八宝君阅读 8,025评论 9 7
  • 总线 计算机的各个功能部件通过总线连接在一起构成完整的计算机系统,总线是多个系统功能部件之间进行数据传送的公共通路...
    罗蓁蓁阅读 10,607评论 0 10
  • 对于Android系统来说,消息传递是最基本的组件,每一个App内的不同页面,不同组件都在进行消息传递。消息传递既...
    bondPang阅读 6,169评论 6 32
  • 关于Mongodb的全面总结 MongoDB的内部构造《MongoDB The Definitive Guide》...
    中v中阅读 32,202评论 2 89
  • 莫名一个普通的周末收到了某人的花, 妈妈说因为这束花来了灵感做了玫瑰的馒头。 妈妈和我视频一直说我爸结婚后就没送过...
    我走路自带闪电阅读 1,504评论 0 0

友情链接更多精彩内容