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

前语

随着 Vue3.4 版别的发布，defineModel 也正式转正了。它能够简化父子组件之间的双向绑定，是现在官方推荐的双向绑定完成方式。

之前在 Vue3.3 中，该办法仍是实验性办法，运用 defineModel 需在 vite.config.ts 里边装备 defineModel 为 true，装备如下：

export default defineConfig({
  plugins: [
    vue({
      script: {
        defineModel: true,
      },
    }),
  ],
});

但 Vue3.4 版别中已经是安稳特性了！！！

正式介绍 defineModel

defineModel 是一个新的 <script setup> 宏，旨在简化支撑 v-model 的组件的完成, 这个宏用来声明一个双向绑定 prop，经过父组件的 v-model 来运用。

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

defineModel 运用

例举一个最简略的运用场景: 自界说组件中运用 v-model 来进行数据的双向绑定

<!-- 父组件 -->
<template>
  <div>
    <!-- 自界说子组件 CustomComponent 运用 v-model 指令绑定 userName -->
    <CustomComponent v-model="userName" />
  </div>
</template>
<script setup>
import { ref } from "vue";
import CustomComponent from "./CustomComponent.vue";
const userName = ref("前端开发爱好者");
</script>

在 Vue3.3 版别之前，咱们一般经过 props 接收 modelValue，然后在更新时，咱们会将更新后的值传递给 emit 的 update:modelValue 并履行:

<!-- 子组件 CustomComponent  -->
<template>
  <input
    :value="props.modelValue"
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>
<script setup>
import { defineProps, defineEmits } from "vue";
const props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue"]);
</script>

Vue3.4 版别之后，咱们将运用 defineModel 替代子组件中的 props 和 emit。

<!-- 子组件 CustomComponent  -->
<template>
  <input type="text" v-model="modelValue" />
</template>
<script setup>
const modelValue = defineModel();
</script>

带参数/界说多个 v-model

组件中能够支撑界说多个 defineModel，能够满意绑定多个双向绑定的属性

<!-- 父组件 -->
<template>
  <div>
    <!-- 自界说子组件 CustomComponent 运用 v-model 指令绑定 userName -->
    <CustomComponent
      v-model="userName"
      v-model:title="title"
      v-model:subTitle="subTitle"
    />
  </div>
</template>
<script setup>
import { ref } from "vue";
import CustomComponent from "./CustomComponent.vue";
const userName = ref("前端开发爱好者");
const title = ref("前端开发爱好者_title");
const subTitle = ref("前端开发爱好者_subTitle");
</script>

<!-- 子组件 CustomComponent  -->
<template>
  <input type="text" v-model="modelValue" />
  <input type="text" v-model="title" />
  <input type="text" v-model="subTitle" />
</template>
<script setup>
const modelValue = defineModel();
const title = defineModel("title");
const subTitle = defineModel("subTitle");
</script>

修饰符和转化器

为了获取 v-model 指令运用的修饰符，咱们能够像这样解构 defineModel() 的返回值：

const [modelValue, modelModifiers] = defineModel()
// 对应 v-model.trim
if (modelModifiers.trim) {
  // ...
}

当存在修饰符时，咱们可能需要在读取或将其同步回父组件时对其值进行转化。咱们能够经过运用 get 和 set 转化器选项来完成这一点：

const [modelValue, modelModifiers] = defineModel({
  // get() 省略了，因为这里不需要它
  set(value) {
    // 假如运用了 .trim 修饰符，则返回裁剪过后的值
    if (modelModifiers.trim) {
      return value.trim()
    }
    // 否则，原样返回
    return value
  }
})

参考衔接:

结语

defineModel 的引进标志着 Vue 在提高开发者体会方面迈出了重要的一步。现在，开发者能够愈加专心于使用的逻辑和用户体会，而不是纠结于数据绑定的细节。让咱们一同迎候 Vue 3.4 带来的更多可能性吧！

写在最后

大众号：前端开发爱好者 专心共享 web 前端相关技术文章、视频教程资源、热点资讯等，假如喜欢我的共享，给 点一个赞 或者 ➕重视 都是对我最大的支撑。

欢迎长按图片加老友，我会第一时间和你共享前端职业趋势，面试资源，学习途径等等。

欢迎加我老友，我会第一时间和你共享前端职业趋势，面试资源，学习途径等等。

WX:xuxuxu_yyy

重视大众号后，在主页：

  • 回复 面试题，获取最新大厂面试资料。
  • 回复简历，获取 3200 套 简历模板。
  • 回复React实战，获取 React 最新实战教程。
  • 回复Vue实战，获取 Vue 最新实战教程。
  • 回复ts，获取 TypeScript 精讲课程。
  • 回复vite，获取 Vite 精讲课程。
  • 回复uniapp，获取 uniapp 精讲课程。
  • 回复js书本，获取 js 进阶 必看书本。
  • 回复Node，获取 Nodejs+koa2 实战教程。
  • 回复数据结构算法，获取数据结构算法教程。
  • 回复架构师，获取 架构师学习资源教程。
  • 更多教程资源应有尽有，欢迎重视获取