vue3 中v-model语法糖示例详解
更新时间：2024年06月25日 14:51:49 作者：宝子卡粉
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语法糖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文给大家分享我使用vscode开发的一些配置。其中包括uniapp组件语法提示，uniapp代码提示，代码自动格式化问题，对vscode 开发uniapp的相关知识感兴趣的朋友一起看看吧2021-08-08
这篇文章主要介绍了vue中组件如何使用vue-quill-editor问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
Vue使用axios post方式将表单中的数据以json格式提交给后端接收操作实例
这篇文章主要介绍了Vue使用axios post方式将表单中的数据以json格式提交给后端接收操作,结合实例形式分析了vue基于axios库post传送表单json格式数据相关操作实现技巧与注意事项,需要的朋友可以参考下2023-06-06
Vue.js是一款流行的前端JavaScript框架,它提供了多种方式来实现路由跳转,下面这篇文章主要给大家介绍了关于Vue实现路由跳转的3种方式,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要为大家详细介绍了vue2如何使用el-tag实现自定义菜单导航标签,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-12-12
Vue ElementUI this.$confirm async await封
这篇文章主要介绍了Vue ElementUI this.$confirm async await封装方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要给大家介绍了关于vue子组件获取到它父组件数据的4种方法,对于vue来说组件之间的消息传递是非常重要的,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了Vue如何导出页面为word格式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了深入了解Vue动态组件和异步组件的相关资料，帮助大家更好的理解和学习vue组件的相关知识，感兴趣的朋友可以了解下2021-01-01
本文主要介绍了Vue不定高展开动效原理详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
最新评论