vue3+ts函数传值

### 使用 Vue 3 和 TypeScript 实现函数参数传递 在 Vue 3 中使用 TypeScript 可以为开发者提供更强大的类型支持，从而增强代码的安全性和可读性。下面是一个简单的例子，展示如何在一个父组件中定义一个方法并将其作为属性传递给子组件，在子组件中调用该方法时携带参数。 #### 定义父级组件 ParentComponent.vue ```typescript <template> <ChildComponent @child-event="handleEvent"></ChildComponent> </template> <script lang="ts"> import { defineComponent } from 'vue'; import ChildComponent from './components/ChildComponent.vue'; export default defineComponent({ components: { ChildComponent, }, methods: { handleEvent(message: string): void { console.log(`Message received by parent component: ${message}`); } } }); </script> ``` 此部分展示了创建了一个名为 `ParentComponent` 的父组件，并向其内部引入了另一个自定义组件 `ChildComponent` 。这里还定义了一个处理事件的方法 `handleEvent()` ，它接受一个字符串类型的参数 `message` 并打印出来[^1]。 #### 创建子级组件 ChildComponent.vue ```typescript <template> <button @click="sendMessageToParent">Send Message to Parent</button> </template> <script lang="ts"> import { defineComponent, PropType } from 'vue'; interface IMessagePayload { message: string; } export default defineComponent({ emits: { 'child-event': (payload: IMessagePayload) => payload.message.length > 0 }, setup(_, context) { const sendMessageToParent = ():void => { const msg:string = "Hello from child!"; context.emit('child-event', { message:msg }); }; return { sendMessageToParent }; } }); </script> ``` 上述代码片段描述的是子组件 `ChildComponent` 的实现方式。在这个文件里声明了一个按钮点击触发的回调函数 `sendMessageToParent()` , 当这个按钮被按下之后会发射一个带有消息对象 `{ message:"..."}` 的 `'child-event'` 自定义事件到上级组件那里去[^2]。 当这两个组件一起工作的时候，一旦用户点击位于 `ChildComponent` 组件内的按钮，则会在控制台输出由 `ParentComponent` 接收到的消息：“Message received by parent component: Hello from child!”。