问Vue js非子父级与事件总线的通信不起作用
EN

Stack Overflow用户

提问于 2017-06-19 15:44:00

回答 0查看 566关注 0票数 0

在vue js文档中，有一种在非父子组件之间通信方法。vue document。但当我尝试这种方法时，它并不起作用。下面是我的代码。有什么帮助吗？

html页面：

<html>
  <body>
      <div id="app10">
          <component3 :id="id"></component3>
          <component4 :id="id"></component4>
      </div>
  </body

</html>

js脚本：

var bus = new Vue();
Vue.component('component3', {
  template: `
    <div @click='change'>
      {{id}}
    </div>
  `,
  props: ['id'],
  methods: {
    change() {
      console.log('??? component3 emit');
      bus.$emit('idSelected', 3);
    }
  },
  mounted() {
  }
});

Vue.component('component4', {
  template: `
    <div>
      {{id}}
    </div>
  `,
  props: ['id'],
});

var app10 = new Vue({
  el: '#app10',
  data: function() {
    return {
      id: '?'
    }
  },
  mounted() {
    bus.$on('idSelected', function(value) {
      console.log('??? app10 click event value: ', value);
      this.id = value;
      console.log('??? this.id', this.id);
    });
  },
  methods: {
  }
});

我想要做的是:当我单击component3时，它的文本内容应该从“问号？”改成“3号”但它不起作用。即使来自父数据的'id‘更改为'3'，子道具的'id’根本没有改变。为什么？

控制台输出：

??? component3 emit
??? app10 click event value:  3
??? this.id 3

vue.js

javascript

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44624855

复制

相似问题

问Vue js非子父级与事件总线的通信不起作用
EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue js非子父级与事件总线的通信不起作用EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue js非子父级与事件总线的通信不起作用
EN