Question

在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: {
  }
});

我想要做的是：当我点击组件3时，其文本内容应该从'问号？'更改？到'3号'。但它不起作用。即使父数据中的'id'变为'3'，子道具的'id'也根本没有变化。为什么呢？

控制台输出：

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

Answer 1

this的值在您的匿名函数内的代码中发生了变化。请改用箭头函数来保留vue实例的上下文。

＆＃13;

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', (value) => {
      console.log('??? app10 click event value: ', value);
      this.id = value;
      console.log('??? this.id', this.id);
    });
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<html>
  <body>
      <div id="app10">
          <component3 :id="id"></component3>
          <component4 :id="id"></component4>
      </div>
  </body>

</html>

＆＃13;

Answer 2

这是一个范围问题。按如下方式调整mounted挂钩：

mounted() {
    const self = this; // save pointer to current 'this'
    bus.$on('idSelected', function(value) {
      console.log('??? app10 click event value: ', value);
      self.id = value; // use 'self' here
      console.log('??? this.id', this.id);
    });
  }

否则你会失去对当前＆＃39;这个＆＃39;的引用，因为它等于＆＃39; bus＆＃39;在你的事件监听器中。尝试在监听器内console.log(this === bus)（== true）。

与事件总线的非儿童父母沟通不起作用

2 个答案: