Question

我想用vuejs将数据从组件设置到另一个组件。这是我的代码：
http://quangtri.herokuapp.com/s/ByNN4FE-b 我哪里错了？请帮我！非常感谢你！

Answer 1

您在function中使用了bus.$on，因此this不是您认为的那样。改为使用箭头功能，它可以正常工作。

＆＃13;

const bus = new Vue();

Vue.component('coupon', {
  data() {
    return {
      name: 'tri'
    }
  },
  template: `
	<div>
	<p>{{ name }}</p>
	<button type="button" @click="batdau">Go</button>
	</div>
	`,
  methods: {

    batdau(name) {
      this.name = 'Maria';
    }
  },
  created() {

  },
  mounted() {
    bus.$on('applied', (name) => {
      alert(name);
      this.name = 'Romeo';
    })
  }
});

Vue.component('couponmore', {

  template: `
	<button type="button" @click="nosukien">Let Set Name</button>
	`,
  methods: {

    nosukien() {
      bus.$emit('applied', 'John');
    }
  }

});

new Vue({
  el: '#root',
  data: {
    couponApplied: false
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id="root">
<coupon></coupon>
<couponmore></couponmore>
</div>

＆＃13;

Answer 2

那是因为在那段代码中，this是窗口，而不是组件。

bus.$on('applied', function(name){
    alert(name);
    this.$data.name ='Romeo';
})

您还使用this.$data.name设置数据，而不仅仅是this.name，我不确定，但这可能会导致数据无效。

解决方案：

如果您使用的是ES6，则可以执行以下操作：

bus.$on('applied', (name) => {
    alert(name);
    this.name ='Romeo';
})

这称为箭头函数，当使用箭头函数而不是普通函数时，函数内部this的值将与父作用域中的值相同（所以，包含data）的组件实例。

如果您使用的是vanilla javascript，请在结尾处使用.bind(this)：

bus.$on('applied', function (name) {
    alert(name);
    this.name ='Romeo';
}.bind(this))

如何在Vuejs中将数据设置到其他Component

2 个答案:

解决方案：