子:
html
<template>
<div>
<h3>子组件</h3>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</div>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
modelValue: {
type: String,
default: ''
}
})
const emits = defineEmits(['update:modelValue'])
</script>
父:
html
<template>
<div>
<h3>父组件</h3>
<ChildComponent v-model:modelValue="message" />
<p>子组件输入的内容:{{ message }}</p>
</div>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue'
let message = ''
</script>
原文地址:vue3中利用v-model实现父子组件之间的数据同步_vue3父子组件传值实时更新-CSDN博客
使用注意(动态绑定失效的例子):
父组件中传递的参数在子 组件中通过重新创建参数接收传递的参数 ,再绑定到页面。将导致数据无法实现动态绑定。
html
<template>
<div>
<h3>子组件</h3>
<input :value="propModelValue" @input="$emit('update:modelValue', $event.target.value)">
</div>
</template>
<script setup>
import { defineProps, defineEmits,ref } from 'vue'
const props = defineProps({
modelValue: {
type: String,
default: ''
}
})
const propModelValue=ref(prop.modelValue)
const emits = defineEmits(['update:modelValue'])
</script>