在 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
响应式引用中。然后,我们可以在模板中使用这个数据来显示用户选择的月份。