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

它非常适合在Parent Vue Component 上使用$children 访问method，它使事情变得非常简单：

<div id="main-component">

   <!-- BUTTON on Main Component that will trigger the method in Child Component -->
   <button @click="$children[0].coolMethod();">I will trigger the a method on Child Component</button>

   <!-- CHILD Component -->
   <some-component-that-has-cool-method></some-component-that-has-cool-method>
</div>

注意：$children[0]，因为我们指的是method，即index 0。

还有其他方法可以实现这一点，它们被描述为here。

以下是该讨论的摘录：

就像一个组件的 $parent 是一个子组件 另一个，有一个孩子（$children？不太记得）的 子组件，但您可以在组件中添加一个 ref 来制作 也许更清楚一点。

祝你好运……

Answer 2

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