父组件中的写法
html
<p>父子组件之间v-model的运用</p>
<p>父组件上的显示值:{
{text}}</p>
<demo-child v-model:text="text" />
ts
import {
defineComponent, provide, ref, reactive,getCurrentInstance } from "vue";
import demoChild from './demochild.vue';
export default defineComponent({
name: "demo",
components:{
demoChild
},
setup(props,ctx) {
const text = ref<string>('');
return {
text };
},
});
子组件中的写法
html
<div>
<input type="text" v-model="textOfChild">
</div>
ts
import {
defineComponent, ref, inject,toRefs,unref, watchEffect, } from "vue";
export default defineComponent({
name: "demoChild",
props:['text'],
setup(props,ctx) {
const textOfChild=ref<string>('')
watchEffect(()=>{
ctx.emit('update:text',textOfChild.value)
});
return {
textOfChild };
},
});
实现效果
总结
vue3.0通过在子组件标签上使用v-model:传递变量名="父组件变量"的形式来实现组件间的双向数据绑定,有点类似于vue2.x中的传递变量名.sync="父组件变量"的写法, 再通过子组件执行 $emit(‘update:传递变量名’,传递值) 来实现向父组件传递数据,使其绑定的那个父组件变量值变为传递值