javascript - VueJS - 触发子函数

Question

我刚开始使用 vuejs (2.0)。我正在尝试关闭此功能:

• 点击一个按钮
• 子组件中的触发函数
• child 数据中的增量

这是我目前拥有的

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://v2.vuejs.org/v2/guide/migration.html#dispatch-and-broadcast-replaced 中所建议)，然后在您的子组件中监听这些事件并使用react。这是对执行此操作的代码的快速更新:

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) 直接访问父级及其发出的事件，但这对我来说看起来很老套。也许如果您的根组件和子组件始终以这种方式紧密耦合，this.$parent 就可以了。上面的“实例化一个新的 vue 实例”示例可能只是另一种方法，无需将子组件绑定(bind)到父组件，因为 Vue 实例实现了事件系统(因此公开了 $emit、$on 方法)