哈喽,大家好 我是 xy👨🏻‍💻。今天给大家推荐一个 Vue3.4 中新增的 defineModel 这个 Api , 真的超好用！！！

前言

随着 Vue3.4 版本的发布，defineModel 也正式转正了。它可以简化父子组件之间的双向绑定，是目前官方推荐的双向绑定实现方式。

之前在 Vue3.3 中，该方法还是实验性方法，使用 defineModel 需在 vite.config.ts 里面配置 defineModel 为 true，配置如下：

复制 1export default defineConfig({
 2  plugins: [
 3    vue({
 4      script: {
 5        defineModel: true,
 6      },
 7    }),
 8  ],
 9});

但 Vue3.4 版本中已经是稳定特性了！！！

正式介绍 defineModel

defineModel 是一个新的 <script setup> 宏，旨在简化支持 v-model 的组件的实现, 这个宏用来声明一个双向绑定 prop，通过父组件的 v-model 来使用。

它之前作为实验性功能在 Vue3.3 中发布，并在 Vue3.4 中升级为稳定状态。现在，它还为 v-model修饰符的使用提供了更好的支持。

defineModel 使用

例举一个最简单的使用场景: 自定义组件中使用 v-model 来进行数据的双向绑定

复制 1<template>
 2  <div>
 3    
 4    <CustomComponent v-model="userName" />
 5  </div>
 6</template>
 7
 8<script setup>
 9import { ref } from "vue";
10import CustomComponent from "./CustomComponent.vue";
11
12const userName = ref("前端开发爱好者");
13</script>

在 Vue3.3 版本之前，我们通常通过 props 接收 modelValue，然后在更新时，我们会将更新后的值传递给 emit 的 update:modelValue 并执行:

复制 1<template>
 2  <input
 3    :value="props.modelValue"
 4    @input="emit('update:modelValue', $event.target.value)"
 5  />
 6</template>
 7
 8<script setup>
 9import { defineProps, defineEmits } from "vue";
10
11const props = defineProps(["modelValue"]);
12
13const emit = defineEmits(["update:modelValue"]);
14</script>

Vue3.4 版本之后，我们将使用 defineModel 替代子组件中的 props 和 emit。

复制 1<template>
 2  <input type="text" v-model="modelValue" />
 3</template>
 4
 5<script setup>
 6const modelValue = defineModel();
 7</script>

带参数/定义多个 v-model

组件中可以支持定义多个 defineModel，可以满足绑定多个双向绑定的属性

复制 1<template>
 2  <div>
 3    
 4    <CustomComponent
 5      v-model="userName"
 6      v-model:title="title"
 7      v-model:subTitle="subTitle"
 8    />
 9  </div>
10</template>
11
12<script setup>
13import { ref } from "vue";
14import CustomComponent from "./CustomComponent.vue";
15
16const userName = ref("前端开发爱好者");
17const title = ref("前端开发爱好者_title");
18const subTitle = ref("前端开发爱好者_subTitle");
19</script>

复制 1<template>
 2  <input type="text" v-model="modelValue" />
 3  <input type="text" v-model="title" />
 4  <input type="text" v-model="subTitle" />
 5</template>
 6
 7<script setup>
 8const modelValue = defineModel();
 9const title = defineModel("title");
10const subTitle = defineModel("subTitle");
11</script>

修饰符和转换器

为了获取 v-model 指令使用的修饰符，我们可以像这样解构 defineModel() 的返回值：

复制 1const [modelValue, modelModifiers] = defineModel()
 2
 3
 4if (modelModifiers.trim) {
 5  
 6}

当存在修饰符时，我们可能需要在读取或将其同步回父组件时对其值进行转换。我们可以通过使用 get 和 set 转换器选项来实现这一点：

复制 1const [modelValue, modelModifiers] = defineModel({
 2  
 3  set(value) {
 4    
 5    if (modelModifiers.trim) {
 6      return value.trim()
 7    }
 8    
 9    return value
10  }
11})

参考连接:

• blog.vuejs.org/posts/vue-3…
• cn.vuejs.org/api/sfc-scr…

结语

defineModel 的引入标志着 Vue 在提升开发者体验方面迈出了重要的一步。现在，开发者可以更加专注于应用的逻辑和用户体验，而不是纠结于数据绑定的细节。让我们一起迎接 Vue 3.4 带来的更多可能性吧！