Question

无法读取Vue文档中有关使用$on使用父级非传统方式发送事件的信息：

子组件：

this.$parent.$emit('loader', value)

父组件（我确实在其中导入子组件）：

this.$on('loader', (value) => {
  console.log(value)
})

注意，它仅在我在子组件中使用this.$parent.$emit时有效，为什么没有$parent时它不起作用？

如果我在父组件中以常规方式使用它：

<child-component @loader="callMethod"/>

它与this.$emit一起使用，而没有$parent。有人可以解释吗？

我也可以分别使用this.$root.$emit和this.$root.$on。如此混乱。

UPDATE1

再次阅读文档，将$on与此link有关，我了解到$on和$emit应该在同一Vue实例中使用，因此我猜需要this.$parent吗？

Answer 1

请考虑您有两个组成部分A <-B <-C。A是B的父级，而B是C的父级。

当您在组件C-this.$parent.$emit('loader', value)中使用此功能时，您实际要做的是-从组件B引发一个事件，然后可由组件A使用在其模板中。因此，以下方法将起作用：

<template>
    <!-- A.vue COMPONENT -->
    <div>
        <!-- Component A doesn't know if event raised by B or C -->
        <!-- Component A only sees component B -->
        <B @loader="doSomething($event)">
    </div>
</template>



<script>
    // C.vue COMPONENT
    export default {

        mounted() {
            const compB = this.$parent;

            // It means event is raised on behalf of component B by component C.
            compB.$emit('loader', someValue);
        }
    }
</script>

如果您熟悉Node.js，则每个Vue组件的行为都类似于EventEmitter或EventBus。因此它可以监听自己的事件，例如：

// some-vue-compoennt.vue
<script>
    export default {

        mounted() {

            // LISTEN TO OWN EVENTS
            this.$on('my-own-event', () => console.log('Listening to myself'));

            // After some time
            setTimeout(() => {
                this.$emit('my-own-event', someValue);
            }, 2000);
        }
    }
</script>

用法-几乎从不：

就用法而言，您不应直接使用$parent实例。始终遵循prop和event模型进行亲子沟通。 Vue在内部使用它，并且仅在某些特殊情况下使用，例如在Graphs，与Maps相关的组件（孙子组件需要访问数据）的情况下。它在父母和孩子之间建立了紧密的联系。当您以编程方式创建警报，小吃店，对话框等正交组件时，也可以使用它。

$root通常用于广播事件或信号。有时用于处理或访问单例数据。但是，请再次考虑为此目的使用Redux或Vuex。这种基于$root的解决方案扩展性很差

$ emit和$ on奇怪的行为-Vue2

1 个答案:

用法-几乎从不：