本文主要是介绍Vue3实战笔记(55)—Vue3.4新特性揭秘:defineModel重塑v-model,拥抱高效双向数据流!,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
文章目录
- 前言
- defineModel() 基本用法
- 总结
前言
v-model 可以在组件上使用以实现双向绑定。
从 Vue 3.4 开始,推荐的实现方式是使用 defineModel() 宏
defineModel() 基本用法
定义defineModel():
<!-- Child.vue -->
<script setup>
const model = defineModel()function update() {model.value++
}
</script><template><div>parent bound v-model is: {{ model }}</div>
</template>
父组件可以用 v-model 绑定一个值:
<!-- Parent.vue -->
<Child v-model="count" />
defineModel() 返回的值是一个 ref。它可以像其他 ref 一样被访问以及修改,不过它能起到在父组件和当前变量之间的双向绑定的作用:它的 .value 和父组件的 v-model 的值同步;当它被子组件变更了,会触发父组件绑定的值一起更新。这意味着你也可以用 v-model 把这个 ref 绑定到一个原生 input 元素上,在提供相同的 v-model 用法的同时轻松包装原生 input 元素:
<script setup>
const model = defineModel()
</script><template><input v-model="model" />
</template>
总结
今天讲讲defineModel()的基本用法,后面会写一个实战小例子分析一下细节
童年是梦中的真 是真中的梦 是回忆时含泪的微笑
这篇关于Vue3实战笔记(55)—Vue3.4新特性揭秘:defineModel重塑v-model,拥抱高效双向数据流!的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!