Vue3.4 中组件 v-model 双向数据绑定 新玩法!!!

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

前言

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

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

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,然后在更新时,我们会将更新后的值传递给 emitupdate: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 替代子组件中的 propsemit

<!-- 子组件 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) {
  // ...
}

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

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 实战教程。
  • 回复数据结构算法,获取数据结构算法教程。
  • 回复架构师,获取 架构师学习资源教程。
  • 更多教程资源应有尽有,欢迎关注获取

原文链接:https://juejin.cn/post/7348703569052647461 作者:前端开发爱好者

(0)
上一篇 2024年3月22日 上午11:09
下一篇 2024年3月22日 下午4:00

相关推荐

发表回复

登录后才能评论