在Vue 3中,可以使用`defineEmits`和`defineProps`函数来定义组件的`v-model`。`defineEmits`函数用于定义组件的事件,而`defineProps`函数用于定义组件的属性。
以下是一个示例:
import { defineComponent, defineEmits, defineProps } from 'vue';
const MyComponent = defineComponent({
emits: defineEmits(['update:modelValue']),
props: defineProps(['modelValue']),
methods: {
handleChange(event) {
this.$emit('update:modelValue', event.target.value);
}
},
template: `
<input :value="modelValue" @input="handleChange">
`
});
export default MyComponent;
在上面的示例中,我们使用`defineEmits`函数定义了一个名为`update:modelValue`的事件。然后,使用`defineProps`函数定义了一个名为`modelValue`的属性。
在组件的模板中,我们通过绑定`:value="modelValue"`将`modelValue`属性绑定到`input`元素的`value`属性上。然后,通过监听`@input`事件,调用`handleChange`方法来更新`modelValue`属性。在`handleChange`方法中,我们使用`$emit`方法触发了`update:modelValue`事件,并传递了`input`元素的值作为参数。
通过以上的定义,我们可以在使用`MyComponent`组件时,使用`v-model`来实现双向绑定。例如:
<template>
<div>
<MyComponent v-model="message" />
<p>Value: {{ message }}</p>
</div>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
data() {
return {
message: ''
};
},
components: {
MyComponent
}
};
</script>
在上面的示例中,我们在`MyComponent`组件上使用了`v-model="message"`,从而实现了将`message`属性双向绑定到`MyComponent`组件的`modelValue`属性上。在父组件中,我们也可以直接通过访问`message`属性来获取或设置`MyComponent`组件的值。