vue3 组件间v-model

---

父组件中的写法

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