vue3ts子调用父组件带参数方法

### Vue 3 TypeScript 子组件调用父组件方法并带参数 在 Vue 3 中，子组件可以通过 `emit` 函数触发自定义事件来通知父组件执行特定操作，并可以携带任意数量的参数。下面是一个完整的例子，展示了如何让子组件调用父组件的方法并传递参数。 #### 父组件 (ParentComponent.vue) ```html <template> <div> <ChildComponent @child-event="handleChildEvent"></ChildComponent> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import ChildComponent from './ChildComponent.vue'; export default defineComponent({ components: { ChildComponent, }, methods: { handleChildEvent(message: string, data?: any): void { console.log(`Message received from child component: ${message}`); if (data !== undefined) { console.log('Additional Data:', data); } }, }, }); </script> ``` 此部分代码设置了父组件监听来自子组件名为 `child-event` 的事件，并在其被触发时调用自身的 `handleChildEvent` 方法处理传入的信息[^1]。 #### 子组件 (ChildComponent.vue) ```html <template> <button @click="sendMessageToParent">Send Message to Parent</button> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: "ChildComponent", setup(props, context) { const sendMessageToParent = (): void => { // 发送简单字符串消息给父级 context.emit('child-event', 'Hello from the child!'); // 或者发送更复杂的数据结构作为第二个参数 /*context.emit( 'child-event', 'Here is some more complex information:', { key: 'value' } );*/ }; return { sendMessageToParent, }; }, }); </script> ``` 这里定义了一个按钮点击事件处理器 `sendMessageToParent()` ，它会通过 emit 向上层发出带有指定名称 (`child-event`) 及其关联负载（即想要传输至父组件的数据）的通知。 当用户点击子组件内的按钮时，就会激活这个函数并向外发射一个事件；随后，在父组件中注册过的相应处理器将会捕获到这些信息并作出反应。