v-model语法糖的说明，v-model语法糖原理，组件间的v-model实现在vue2.0中v-mode语法糖简写的代码：
<Son :value="msg" @input="msg=$event" />
简写：
<Son v-model="count" />
在vue3.0中v-model语法糖有所调整：
<Son :modelValue="msg" @update:modelValue="msg=$event" />
简写：
<Son v-model="count" />
代码：
⽗组件：
<template>
<div id="container">
<h1 @click="$event.lor = 'red'">⽗组件{{ count }}</h1>
<!--如果你想获取原⽣事件事件对象-->
<!--如果绑定事函数 fn fn(e){// e 就是事件对象 } -->
<!--如果绑定的是js表达式此时提供⼀个默认的变量 $event -->
<hr />
<!-- count=$event 触发该⾃定义事件时的传参-->
<!--如果你想获取⾃定义事件-->
<!--如果绑定事函数 fn fn(data){// data 触发⾃定义事件的传参 } -->
<!--如果绑定的是js表达式此时 $event代表触发⾃定义事件的传参在此demo中也就是那个100--> <!--<Soonn :modelValue="count" @update:modelValue="count = $event"/>-->
<!--上述代码，可以简写-->
<Soonn v-model:modelValue="count"/>
</div>
</template>
<script>
import Soonn from"./Soonn.vue";
import{ ref }from"vue";
export default{
name:"App",
components:{
Soonn,
},
setup(){
const count =ref(10);
return{ count };
},
};
</script>
<style lang='less' scoped>
</style>
⼦组件：
<template>
<div id="container">
<h1>⼦组件{{modelValue}}</h1>
<button @click="fn">按钮</button>
</div>
</template>
<script>
export default{
name:"Soonn",
props:{
modelValue:{
type: Number,
default:0
}
},
setup(props,{emit}){
const fn=()=>{
// 改变数据
emit("update:modelValue",100)
};
return{ fn };
},
};
</script>
<style lang='less' scoped>update语法大全
</style>
总结：
vue3.0封装组件⽀持v-model的时候，⽗传⼦:modelValue ⼦传⽗ @update:modelValue
补充：
vue2.0的 xxx.sync 语法糖解析 ⽗传⼦ :xxx ⼦传⽗ @update:xxx 在vue3.0 使⽤ v-model:xxx 代替。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。