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，所以我可能错了，但据我所知，让一个子组件依赖于特定的父级是一个坏主意，因为它迫使子组件“耦合”＃34;让那个父母发挥作用并使其不可携带。从子组件备份中发出事件是很好的，因为这只是让任何人都知道发生了什么事情的组件。我猜你可以使用this.$parent.$on('add-item', this.method)直接访问父项和它直接发出的事件，但这看起来像我一样hackish。也许如果你的root和child组件总是以这种方式紧密耦合，this.$parent就可以了。＆＃34;设置新的vue实例＆＃34;上面的示例可能只是另一种方法，在没有将子组件绑定到父组件的情况下执行此操作，因为Vue实例实现了事件系统（因此公开$ emit，$ on methods）

Answer 2

通过method上的$children访问Parent Vue Component非常有用，它可以让事情变得非常简单：

<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的{{1}}。

还有其他方法可以实现这一点，并对它们进行了描述here。

以下是该讨论的摘录：

就像有一个孩子的组件有一个$ parent 另外，有一个孩子（$孩子？不能完全记住）的子组件，但您只需添加一个参考组件即可它可能更清楚一点。

祝你好运....

VueJS - 触发子函数

2 个答案: