VueJS - 触发子功能

Question

我是新手使用vuejs(2.0).我试图让这个功能失效:

• 单击按钮
• 子组件中的触发器功能
• 增加孩子数据的数量

这就是我现在拥有的

HTML:

<div id="root">
    <cart @addtocart="add()"></cart>
    <button @click="$emit('addtocart')">Add to Cart</button>
</div>

JS:

Vue.component('cart', {
  template: `<span>{{ items }}</span>`,
  data() {
    return {
      items: 0
    }
  },
  methods: {
    add() {
      alert('add');
    }
  }
});


new Vue({
  el: '#root',
  components: ['cart'],
});

任何帮助将不胜感激.感谢大家!

Answer 1

您可以使用集中式中心发送事件(如文档https://vuejs.org/v2/guide/migration.html#dispatch-and-broadcast-replaced中所建议的那样),然后聆听并回应您内部的事件儿童组件.以下是对代码的快速更新:

var eventHub = new Vue();

Vue.component('cart', {
  template: `<span>{{ items }}</span>`,
  data() {
    return {
      items: 0
    }
  },
  created() {
    eventHub.$on('add-item', this.add)
  },
  methods: {
    add() {
      alert('add');
      this.items++;
    }
  }
});


new Vue({
  el: '#root',
  components: ['cart'],
  methods: {
    addToCart() {
        eventHub.$emit('add-item')
    }
  }
});

我刚刚开始使用vue所以我可能错了,但据我所知,让一个子组件依赖于特定的父组件是一个坏主意,因为它强制子组件"耦合"到该父组件来运行并使其成为可能不便携.从子组件备份发出事件是很好的,因为这只是让任何人都知道发生了什么事情的组件.我想你可以通过使用直接访问父和它发出的事件,this.$parent.$on('add-item', this.method)但这看起来像我一样hackish.也许如果你的根和子组件总是以这种方式紧密耦合,那this.$parent就没问题了.上面的"实例化新的vue实例"示例可能只是另一种方法来实现这一点,而不会将您的子组件绑定到父组件,因为Vue实例实现了事件系统(因此暴露$ emit,$ on方法)