通过 this.$ref

Question

假设我们有一个子组件发出自定义事件

iterated

。有没有办法通过

this.$ref

监听父组件中的事件？喜欢

this.$refs.on('iterated', event)

。我知道我可以通过

v-on

或使用

watch

监听组件，但文档没有说明如何在组件实例上实现这一点。一个简单的用例可能是一个图像裁剪器，它在裁剪完成后发出一个事件，将文件排队等待多次上传。

请看下面的简化示例。

子组件

<template>
    <p>Count: {{ count }} </p>
<template>

<script>
    export default {
        data: () => ({
            count: 1
        }),
        mounted () {
            const that = this;
            setTimeout(() => {
                that.count++;
                that.$emit('iterated', that.count);
            }, 2000);
        }
    };
</script>

父组件

<template>
    <child-component ref="myChild" />
<template>

<script>
    export default {
        mounted () {
            this.$refs.myChild.on('iterated', (count) => {
                console.log(count);
            });
        }
    };
<script>

// 编辑：这个问题可能重复（虽然没有答案）：VueJS 3 : Add event listener through js code

Answer 1

不，组件发出的事件不会冒泡。

在引擎盖下，所有定义为组件发出的事件的事件监听器都是Custom Events，

bubbles

的默认值是

false

。

因此事件仅在子组件上触发，不会冒泡到父组件。

---

请阅读声明发出的事件关于用自定义/发出的事件覆盖本机事件的警告。