首页vue+ts子组件完成时给父组件的成功回调函数

vue+ts子组件完成时给父组件的成功回调函数

时间: 2025-06-29 21:15:13 AIGC 浏览: 24

### 使用 Vue 3 和 TypeScript 实现子组件调用父组件的成功回调函数在 Vue 3 中，通过 `defineEmits` 可以定义自定义事件来触发父组件的方法。下面是一个完整的例子展示如何使用 TypeScript 来实现这一功能。 #### 父组件 (ParentComponent.vue) ```vue <template> <div> <h1>这是父组件</h1> <ChildComponent @success="handleSuccess" /> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import ChildComponent from './ChildComponent.vue'; export default defineComponent({ components: { ChildComponent, }, methods: { handleSuccess(message: string): void { console.log(`接收到的消息来自子组件：${message}`); } } }); </script> ``` 此段代码展示了父组件接收到来自子组件发出的 `success` 事件并执行相应处理逻辑[^1]。 #### 子组件 (ChildComponent.vue) ```vue <template> <button @click="onClick">点击我发送消息给父组件</button> </template> <script lang="ts"> import { defineComponent, DefineEmits } from 'vue'; interface EmitEvents { (e: 'success', message: string): void; } export default defineComponent({ emits: ['success'] as EmitEvents[], setup(_, { emit }) { const onClick = (): void => { emit('success', '这是一个成功的信号'); }; return { onClick, }; }, }); </script> ``` 这里定义了一个按钮，在点击时会发射名为 `success` 的事件，并附带一条消息作为参数传递给监听该事件的父组件。当用户点击子组件内的按钮后，将会触发 `emit('success')` 方法，进而激活父组件中对应的处理器 `handleSuccess()` 函数，完成一次父子间通信的过程。

阅读全文