vuejs 2.0 中的递归组件通信答案

【问题标题】：recursive component communication in vuejs 2.0vuejs 2.0 中的递归组件通信
【发布时间】：2017-10-30 09:43:34
【问题描述】：

假设组件名称是“customComponent”

及其用法示例：

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

让我们假设，'someTruthyCondition' 为真，生成 3 个组件并停止递归。

我想知道vue js中子customComponent和父customComponent之间如何通信？

【问题讨论】：

标签： javascript recursion vue.js vuejs2

【解决方案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>

当然，我不知道这是否会奏效，但这是我想到的。

【讨论】：

你能给我一个小提琴吗？我尝试编写代码，但找不到我的问题的答案。

【解决方案2】：

您可以在 Vue.js 中将函数用作道具。这不是一个常见的模式因为，与 React 不同，Vue.js 有自定义事件孩子与父母的沟通。但对于像这样的情况，它真的派上用场。

与在每个级别发出事件不同，这要简单得多，并且高效，因为我们只需要将相同的引用传递给功能。

签出this。

【讨论】：

【解决方案3】：

我没有对此进行测试，但我认为这样的事情可能会对你有所帮助。

main.js：

window.Event = new Vue();

父元素：

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

子元素：

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

【讨论】：

无法弄清楚您提到的内容。小提琴会很有帮助
@NitinKumar 查找“Vue.JS 事件总线”

【解决方案4】：

使用v-on="$listeners" 递归子级触发事件到父级。

当您将任何事件侦听器附加到组件的第一次调用时，您可以通过这种方式附加到所有递归调用组件。

<custom-component class='parent' @click="doSomething()">
  <div v-if='someTruthyCondition'>
    <custom-component class='child' v-on="$listeners"></custom-component>
  </div>
</custom-component>

现在在您使用它的组件中，将有 doSomething 方法 - 它将被触发到任何递归子节点

【讨论】：