<template>
<child-component v-model="pageTitle"></child-component>
</template>
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
const pageTitle = ref('Initial Title');
</script>
在这个例子中,子组件通过触发一个事件来通知父组件更新 pageTitle
的值。这个事件的名称必须遵循 update:modelValue
的格式,这样 v-model
才能正确地工作。
使用自定义事件
如果你需要更多的控制,或者你想要明确地表达数据更新的意图,你可以使用自定义事件。
子组件 (ChildComponent.vue):
<script setup>
defineProps(['title']);
defineEmits(['updateTitle']);
const updateValue = (newValue) => {
emit('updateTitle', newValue);
};
</script>
<template>
<input :value="title" @input="updateValue($event.target.value)">
</template>
父组件 (ParentComponent.vue):
<template>
<child-component :title="pageTitle" @updateTitle="pageTitle = $event"></child-component>
</template>
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
const pageTitle = ref('Initial Title');
</script>
在这个例子中,子组件在输入框的值发生变化时触发一个名为 updateTitle
的自定义事件,父组件监听这个事件,并在事件处理函数中更新 pageTitle
的值。
使用这些方法,你可以在 Vue 3 中实现类似 Vue 2 中 .sync
修饰符的功能。