Question

假设组件名称是＆＃34; customComponent＆＃34;

及其用法示例：

#!/bin/bash

让我们假设，＆＃39; someTruthyCondition＆＃39;是真实的util 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

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

main.js：

window.Event = new Vue();

父元素：

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

子元素：

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

Answer 3

您可以在Vue.js中将函数用作道具。这不是常见的模式   因为与React不同，Vue.js具有自定义事件   儿童与父母之间的沟通。但是对于这种情况，   派上用场。

与在每个级别发出事件不同，这更简单且   因为我们只需要传递相同的参考   功能。

检出this。

Answer 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方法-它会被任何递归子级触发

vuejs 2.0中的递归组件通信

4 个答案: