以下是Vue3中使用v-model实现组件的双向数据绑定的示例代码:
首先,让我们来了解一下Vue3中v-model的用法。在Vue3中,v-model 指令可以用于自定义组件上,用于实现组件的双向数据绑定。与Vue2中的 .sync 不同,Vue3中的v-model需要在组件中手动实现双向绑定逻辑。
下面是一个简单的父组件示例,展示了如何在Vue3中使用 v-model 来实现组件的双向数据绑定:
< template> < div> < custom-input v-model = " message" > </ custom-input> < p> Message: {{ message }}</ p> </ div>
</ template> < script>
import { ref } from 'vue' ;
import CustomInput from './CustomInput.vue' ; export default { components : { CustomInput, } , setup ( ) { const message = ref ( '' ) ; return { message, } ; } ,
} ;
</ script>
在上面的示例中,我们定义了一个父组件,并在其中使用了一个 自定义组件CustomInput。 我们使用 v-model指令将父组件的 message属性绑定到CustomInput组件的modelValue属性上 。 这样,当CustomInput组件的modelValue属性发生变化时,父组件的message属性也会相应地更新。
接下来,我们需要在CustomInput组件中手动实现双向绑定逻辑。 下面是CustomInput组件的代码:
< template> < input :value = " modelValue" @input = " $emit('update:modelValue', $event.target.value)" >
</ template> < script>
import { defineProps } from 'vue' ; export default { props : { modelValue : { type : String, required : true , } , } , emits : [ 'update:modelValue' ] ,
} ;
</ script>
在上面的代码中,我们定义了一个自定义组件CustomInput,并在其中使用了一个input元素。我们使用:value属性将父组件传递过来的modelValue属性绑定到input元素的value属性上。这样,当父组件的message属性发生变化时,CustomInput组件的modelValue属性也会相应地更新。
同时,我们使用@input事件监听input元素的输入事件,并使用$emit方法触发一个名为update:modelValue的自定义事件,并将输入框的值作为参数传递给父组件。这样,当用户在输入框中输入内容时,父组件的message属性也会相应地更新。
最后,我们需要在父组件中引入CustomInput组件,并将其注册为局部组件。这样,我们就可以在父组件中使用v-model指令来实现组件的双向数据绑定了。
Vue3.js官方文档 - 组件v-model(.sync) Vue3.js官方文档 - 组件v-model 演示地址