vue3 中v-model语法糖（2024-06-21）

---

一、 vue2 中 v-model 语法糖

实现父子组件双向数据绑定，一个输入框或者组件指定绑定一个 v-model

1. 父组件写法

<template><div><h1>App</h1><h2>{{ count }}</h2><input type="text" v-model="count" /><!-- 展开写法，@input中的 count 的值来自当前输入框事件 --><input type="text" :value="count" @input="count = $event.target.value" /><hr /><Children v-model="count"></Children><!-- 展开写法，@input中的 count 的值来自子组件输入框中的值 $event.target.value --><Children :value="count" @input="count = $event"></Children></div>
</template><script>
import Children from "@/components/Children.vue";
export default {components: {Children,},data() {return {count: "1",};},
};
</script>

2. 子组件写法

<template><div><h1>main</h1><div>{{ value }}</div><inputtype="text":value="value"@input="$emit('input', $event.target.value)"/></div>
</template><script>
export default {props: {value: {type: String,},},
};
</script>

---

二、 vue2 的 v-bind.sync 修饰符语法糖，实现父子组件双向数据绑定

注意：子组件标签中可以同时使用多个 .sync 修饰符

1. 在父组件中

<template><div><h1>App</h1><input v-model="count" type="text" /><hr /><Children :count.sync="count"></Children><!-- 展开写法，@update:value中的 count 的值来自子组件输入框中的值 $event.target.value --><Children :count="count" @update:count="count = $event"></Children></div>
</template><script>
import Children from "@/components/Children.vue";
export default {components: {Children,},data() {return {count: "1",};},
};
</script>

2. 在子组件中

<template><div><h1>main</h1><h2>{{ count }}</h2><inputtype="text":value="count"@input="$emit('update:count', $event.target.value)"/></div>
</template><script>
export default {props: {count: {type: String,},},
};
</script>

---

三、 vue3 的 v-model 语法糖

1. vue3 中的 v-model 相当于 vue2 中的 v-model 和 v-bind.sync 修饰符组合在一起的产物（择优整合）
2. v-bind.sync 在 vue3 中被移除了
3. 可以在组件标签上使用多个 v-model 绑定属性，使用参数区分

1. 在父组件中

<template><div><h1>App</h1><h2>{{ count }}</h2><input type="text" v-model="count" /><!-- 此展开写法，仅限于输入框 --><input type="text" :value="count" @input="count = $event.target.value" /><hr /><Children v-model:count="count"></Children><!-- 此展开写法，仅限于组件 --><Children :count="count" @update:count="count = $event"></Children></div>
</template><script>
import Children from "@/components/Children.vue";
import { ref } from "vue";export default {components: {Children,},setup() {const count = ref("1");return { count };},
};
</script>

2. 在子组件中

<template><div><h1>main</h1><div>{{ count }}</div><label>count：<inputtype="text":value="count"@input="emit('update:count', $event.target.value)"/></label></div>
</template><script>
export default {props: {count: {type: String,},},setup(props, { emit }) {console.log(props);return { emit };},
};
</script>