Vue 3：从父组件向子组件发出事件

Question

现在我需要从父组件向子组件发出事件。我在 vue version 3 中看到$on，$off实例$once方法被删除了。应用程序实例不再实现事件发射器接口。

现在我如何可以从 vue 版本 3 中的父组件发出事件并从子组件监听？

Answer 1

您可以使用以下方式访问子方法Refs

https://v3.vuejs.org/guide/composition-api-template-refs.html

<!-- Parent -->
<template>
    <ChildComponent ref="childComponentRef" />
</template>

<script>
import { ref } from 'vue'
import ChildComponent from './components/ChildComponent.vue'

export default { 
  setup( ) {
    const childComponentRef = ref()
    childComponentRef.value.expandAll();

    return { childComponentRef }
  }
}
</script>

<!-- Child -->
<script>
export default {
    setup() {
        const expandAll= () => {
            //logic...
        }

        return { expandAll}
    }
}
</script>

Answer 2

您不会从子组件监听父事件，而是将一个 prop 传递给子组件，如果子组件需要更新数据，您将从子组件向父组件发出一个事件来更新状态。

只读生命周期：Parent > Prop > Child

读取/更新生命周期：Parent > Prop > Child > Emit > Parent > Update > Child Updates