vue3+ts使用emit向父组件传递参数

在 Vue 3 和 TypeScript 的环境中，给父组件传参通常是通过事件来实现的。子组件会发出一个事件，并附带需要传递给父组件的数据，然后父组件监听这个事件并接收数据。

子组件：

<template>     <div>       <!-- 假设有一个输入框用于选择月份 -->       <input type="text" v-model="selectedMonth" @input="emitMonth">     </div>   </template>      <script lang="ts">   import { defineComponent, ref, defineEmits } from 'vue';      export default defineComponent({     name: 'MonthPicker',     setup(props, { emit }) {       const selectedMonth = ref('');          const emitMonth = () => {         emit('update:month', selectedMonth.value);       };          return {         selectedMonth,         emitMonth,       };     },   });   </script>

在这个子组件中，我们有一个输入框，用户可以在其中输入月份。当输入框的值发生变化时，会调用 emitMonth 方法，该方法会发出一个名为 update:month 的事件，并将 selectedMonth 的值作为参数传递。

父组件：

<template>     <div>       <MonthPicker @update:month="handleMonthUpdate" />       <p>Selected Month: {{ selectedMonth }}</p>     </div>   </template>      <script lang="ts">   import { defineComponent, ref } from 'vue';   import MonthPicker from './MonthPicker.vue';      export default defineComponent({     components: {       MonthPicker,     },     setup() {       const selectedMonth = ref('');          const handleMonthUpdate = (month: string) => {         selectedMonth.value = month;       };          return {         selectedMonth,         handleMonthUpdate,       };     },   });   </script>

在父组件中，我们通过监听 update:month 事件来接收子组件传递的月份数据。当事件被触发时，handleMonthUpdate 方法会被调用，并将事件传递的月份数据保存到 selectedMonth 响应式引用中。然后，我们可以在模板中使用这个数据来显示用户选择的月份。