Vue3.4双向绑定新特性：defineModel好用爱用

vue3中传统的v-model的定义方式是声明modelValue属性，然后在事件发布时发送update:modelValue来实现v-model更新。笔者在使用jsx模板来开发组件时，发现了其弊端。值得欣喜的是，从vue 3.4开始引入了一个实现v-model的新特性defineModel的composition api。下面是相关实践。

更多全栈技术分享，请关注小卷，坚持做最新原创实战技能分享，让学习变得更轻松！

传统modelValue定义方式

咱们接着上一个教程：使用tailwindcss轻松实现移动端rem适配中的仿b站头部导航条，继续开发一个移动端popup弹层组件。先简单实现如下的效果：

看下传统的实现方式：

这里我们通过defineProps来定义与v-model指令绑定的数据模型，属性名固定为modelValue。然后通过defineEmits定义了发送更新v-model的事件，名称固定为update:modelValue。

然后我们用了@vueuse/core模块提供的滚动相关的控制功能，在监听到弹层出现时，锁定页面以禁止内容滚动。

当点击遮罩层时，我们再emit更新v-model的事件来关闭弹层：

这种方式实现起来稍有点繁琐，但v-model的双向绑定功能实现是没有问题的。

modelValue定义形式的坑

以上方式定义的组件，在外部jsx模板中使用时，遇到一个坑：竟然无法识别v-model指令，且必须要匹配modelValue的定义：

但如果我们做了如下修复：

<JuanPopup modelValue={isVisible.value}>
  <p>我是内容</p>
</JuanPopup>

内部发送update:modelValue事件后，并不能实现双向绑定。假如传入一个响应式对象类型，修改其属性也可以实现双向绑定，而这里的情况只是简单的值类型。

vue3.4新特性：defineModel

官方参考内容：组件的v-model

通过这种方式进行改造，发现代码变得非常简化：

在template模板中只需要基于model判断是否显示弹层即可，非常方便。使用这种方式后，外部使用组件时，在jsx模板中可以放心这样用：