vue3 组件间v-model

Vue3组件间v-model实现与双向数据绑定

最新推荐文章于 2025-10-05 15:06:03 发布

原创最新推荐文章于 2025-10-05 15:06:03 发布 · 585 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html #typescript #javascript #html5

本文总结了Vue3中组件间的v-model实现方式，包括父组件的写法和子组件的写法。父组件通过v-model绑定变量，子组件内部使用ref和watchEffect监听并更新值，通过$emit触发'update:propName'来实现数据回传，达到双向数据绑定的效果。这种方式类似于Vue2的.sync修饰符。

vue3 组件间的v-model实现

总结

父组件中的写法

html

	<p>父子组件之间v-model的运用</p>
    <p>父组件上的显示值：{{text}}</p>
    <demo-child v-model:text="text" />

	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>

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:传递变量名’,传递值) 来实现向父组件传递数据，使其绑定的那个父组件变量值变为传递值