vue3组件v-model
时间: 2023-07-17 10:57:21 浏览: 117
vue3实现v-model原理详解
5星 · 资源好评率100%
在Vue3中,父子组件间v-model传值的方式和Vue2相比有所改变,可通过在子组件中使用“emit”自定义一个名为“update:modelValue”的事件,然后在父组件中使用v-model来绑定这个事件的参数值即可。如下所示:
子组件代码:
```vue
<template>
<div>
<input type="text" :value="modelValue" @input="handleInput">
</div>
</template>
<script>
export default {
props: {
modelValue: String
},
methods: {
handleInput(e) {
this.$emit('update:modelValue', e.target.value)
}
}
}
</script>
```
父组件代码:
```vue
<template>
<div>
<ChildComponent v-model="name"></ChildComponent>
<p>{{ name }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
name: ''
}
}
}
</script>
```
父组件中使用v-model绑定的“name”变量会作为子组件emit的参数,实现父子组件间的数据双向绑定。
阅读全文