Vuejs2.0中的递归组件通信

Question

假设组件名称为"customComponent“

以及它的使用示例：

<custom-component class='parent'>
  <div v-if='someTruthyCondition'>
    <custom-component class='child'></custom-component>
  </div>
</custom-component>

让我们假设，'someTruthyCondition‘是真的，直到3个组件被生成并且递归停止。

我想知道如何在vue js中从子customComponent到父customComponent进行通信？

Answer 1

我不确定这是否会起作用，因为你的例子感觉像是代码气味，而我还没有尝试过这样的东西。您可以使用事件，并且无论何时创建子组件，都可以向父组件发出事件：

https://vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events

在来自Vue.js文档的示例中，他们使用了以下内容：

<button-counter v-on:increment="incrementTotal"></button-counter>

因此，子组件在created生命周期钩子中调用此函数：

this.$emit('increment')

当你在你的父母内部收到这个事件时，你可以递增一个数字，当它达到3时，你就会停止你的v-for循环。

<custom-component class='child'></custom-component>

诚然，我甚至不知道这是否可行，但在我的头顶上，这是我想出来的东西。

Answer 2

在Vue.js中，您可以将函数用作道具

。这不是一种常见的模式，因为与React不同，Vue.js具有用于子代到父代通信的自定义事件。但对于像这样的情况，它真的很方便。

与在每个级别上发出事件不同，这要简单得多，性能也高得多，因为我们只需要向下传递对函数的相同引用。

查看this。

Answer 3

我还没有测试过，但我认为这样的东西可能会对你有所帮助。

main.js：

window.Event = new Vue();

父元素：

mounted () {
    Event.$on('recursion', () => {
        this.recursion++;
    })
}

子元素：

created () {
    Event.$emit('recursion');
}