vue3 中v-model语法糖示例详解
作者：宝子卡粉
vue3中的v-model相当于vue2中的v-model和v-bind.sync 修饰符组合在一起的产物（择优整合）v-bind.sync 在 vue3 中被移除了可以在组件标签上使用多个 v-model 绑定属性,使用参数区分,这篇文章主要介绍了vue3 中v-model语法糖,需要的朋友可以参考下
一、 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>
<input
type="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>
<input
type="text"
:value="count"
@input="$emit('update:count', $event.target.value)"
/>
</div>
</template>
<script>
export default {
props: {
count: {
type: String,
},
},
};
</script>三、 vue3 的 v-model 语法糖
vue3 中的 v-model 相当于 vue2 中的 v-model 和 v-bind.sync 修饰符组合在一起的产物（择优整合）v-bind.sync 在 vue3 中被移除了可以在组件标签上使用多个 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：<input
type="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>到此这篇关于vue3 中v-model语法糖的文章就介绍到这了,更多相关vue3 v-model语法糖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！