vue3 v-model父子组件传值
时间: 2024-01-31 20:11:03 浏览: 29
在Vue 3中,v-model的父子组件传值方式有所改变。在Vue 2中,v-model是一个语法糖,实际上是通过props和emit来实现父子组件之间的双向绑定。而在Vue 3中,v-model被重新设计为一个指令,它可以直接在子组件上使用。
在Vue 3中,父组件通过v-model指令将数据传递给子组件,并且可以监听子组件的值变化。子组件通过$emit方法触发一个名为"update:modelValue"的自定义事件来更新父组件的值。
下面是一个简单的示例,演示了如何在Vue 3中使用v-model进行父子组件传值:
父组件:
```vue
<template>
<div>
<ChildComponent v-model="value" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
value: ''
};
}
};
</script>
```
子组件:
```vue
<template>
<div>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</div>
</template>
<script>
export default {
props: {
modelValue: {
type: String,
required: true
}
}
};
</script>
```
在父组件中,我们使用v-model指令将value属性传递给子组件。在子组件中,我们使用:value绑定modelValue属性,并通过@input事件触发"update:modelValue"事件来更新父组件的值。
这样,当子组件中的输入框的值发生变化时,父组件的value属性也会相应地更新。