vue双向绑定

vue2 v-model的语法糖

<!--父组件-->
   <template>
       <!--v-model 是语法糖-->
       <Child v-model="model"></Child>
       <!--相当于下面的代码-->
       <!--v-model的默认行为是input,默认prop是value-->
       <Child :value="model" @input="model = $event"></Child>
   </template>

export default {
	props: {
		value: {
			type: String,
    	},
  	},
  	methods: {
    	toggle() {
      		this.$emit('input', '123')
    	}
  	}
};

Vue3中的v-model

<!--父组件-->
   <template>
	<!--v-model 是语法糖-->
	<Child v-model:value="model"></Child>
	<!--相当于下面的代码-->
	<Child :value="model" @update:value="model = $event"></Child>
   </template>

// 子组件组件
export default {
	props:{
    	value: String
   	},
   	setup(props,context) {
   		const toggle = ()=>{
     		context.emit('update:value', '123')
   		}
   		return {toggle};
	}
 }

.sync 修饰符

vue2中v-model只能对value进行双向绑定，2.3.0+ 新增.sync, 对多个prop 进行“双向绑定”。Vue3中v-model已经可以给多个prop使用进行双向绑定。

<!--父组件-->
   <template>
       <!--v-model 是语法糖-->
       <Child :value.sync="model"></Child>
       <!--相当于下面的代码-->
       <Child :value="model" @update:value="model = $event"></Child>
   </template>

export default {
	props: {
		value: {
			type: String,
    	},
  	},
  	methods: {
    	toggle() {
      		this.$emit('update:value', '123')
    	}
  	}
};