本文主要是介绍vue3中子组件调用父组件事件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
在 Vue 3 中，子组件调用父组件的事件（或方法）的方式与 Vue 2 类似，但 Vue 3 引入了 Composition API，这可能会改变你组织代码的方式。不过，基本的通信机制——通过自定义事件 ($emit) 通知父组件——仍然保持不变。
以下是如何在 Vue 3 中使用 Options API 和 Composition API 的示例：
使用 Options API
父组件 (ParentComponent.vue)
<template>
<div>
<h2>父组件</h2>
<ChildComponent @child-event="handleChildEvent" />
</div>
</template> <script>
import ChildComponent from './ChildComponent.vue'; export default {
components: {
ChildComponent
},
methods: {
handleChildEvent(payload) {
console.log('子组件触发的事件被父组件捕获', payload);
}
}
};
</script>子组件 (ChildComponent.vue)
<template>
<div>
<h3>子组件</h3>
<button @click="triggerParentEvent">触发父组件事件</button>
</div>
</template> <script>
export default {
methods: {
triggerParentEvent() {
this.$emit('child-event', { message: '来自子组件的数据' });
}
}
};
</script>使用 Composition API
父组件 (ParentComponent.vue) (这里父组件使用 Options API 或 Composition API 都可以)
子组件 (ChildComponentWithComposition.vue)
<template>
<div>
<h3>使用 Composition API 的子组件</h3>
<button @click="triggerParentEvent">触发父组件事件</button>
</div>
</template> <script>
import { defineComponent, ref } from 'vue'; export default defineComponent({
setup(props, { emit }) {
const triggerParentEvent = () => {
emit('child-event', { message: '来自使用 Composition API 的子组件的数据' });
}; return {
triggerParentEvent
};
}
});
</script>在 Composition API 中，setup 函数接收两个参数：props 和 context。context 是一个对象，它包含了 attrs、slots 和 emit 等属性。你可以通过 context.emit 来触发事件，但更常见的做法是将 emit 直接从 setup 函数的参数中解构出来，如上面的示例所示。
在这两种情况下，子组件都通过 $emit 方法触发一个名为 child-event 的事件，并将一些数据作为有效负载传递给父组件。父组件监听这个事件，并在事件触发时调用相应的方法。
这篇关于vue3中子组件调用父组件事件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
