Javascript vuejs 2.0中的递归组件通信

假设组件名称为“customComponent”

及其使用示例：

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

让我们假设“someTruthyCondition”为true，直到生成3个组件并停止递归

---

我想知道如何在vue js中的子customComponent与父customComponent之间进行通信？

我不确定这是否有效，因为您的示例感觉像是代码味道，我没有尝试过类似的方法。可以使用事件，并且无论何时创建子组件，都可以向父组件发出事件：

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

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

每当您在父级中收到此事件时，您可以只增加一个数字，当它达到3时，停止您的

v-for

循环

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

---

当然，我不知道这是否有效，但在我的头脑中，这是我想到的。

我还没有测试过这一点，但我认为类似的东西可能会对你有所帮助

main.js：

window.Event = new Vue();

父元素：

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

子元素：

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

您可以在Vue.js中将函数用作道具。这不是常见的模式 因为，与React不同，Vue.js为 孩子与家长的沟通。但对于像这样的案例，它真的 很方便

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

签出。

对递归子级使用

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

方法-它将被触发到任何递归子对象中

您能给我一把小提琴吗。我试图写代码，但没有找到问题的答案。无法理解您提到的内容。提琴是helpful@NitinKumar查找“Vue.JS事件总线”

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