-
在子组件中导入
defineEmits
:在<script setup>
的顶部,你需要导入defineEmits
函数。import { defineEmits } from 'vue';
-
定义自定义事件:使用
defineEmits
函数定义你想要触发的自定义事件。你可以传递一个事件名称的数组作为参数。const emit = defineEmits(['custom-event']);
-
触发自定义事件并传递数据:在组件的方法中,你可以使用
emit
函数来触发自定义事件,并传递所需的数据。数据可以是任何类型,例如字符串、对象或数组。const handleClick = () => { emit('custom-event', { message: 'Hello from child component!' }); };
-
在模板中使用事件:在模板中,你可以使用
@
符号监听自定义事件,并指定一个处理程序来处理事件触发时的情况。处理程序可以接收传递的数据作为参数。<template> <button @click="handleClick">触发自定义事件</button> </template>
-
在父组件的模板中,使用
@
符号来监听子组件触发的自定义事件,并在事件处理程序中接收传递的数据。父组件模板:
<template> <ChildComponent @custom-event="handleCustomEvent" /> </template>
父组件:
import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleCustomEvent(data) { // 在这里接收子组件传递的数据 console.log(data); // 输出传递的数据 } } };
在上述示例中,父组件通过
@custom-event
监听子组件触发的custom-event
事件。当事件触发时,父组件的handleCustomEvent
方法将被调用,并接收传递的数据作为参数。你可以根据实际需求对数据进行处理或使用。
在 <script setup> 中使用 defineEmits 触发自定义事件传递数据(子传父)
于 2024-01-13 15:50:09 首次发布