Vue3.4中v-model双向数据绑定新玩法详解_Javascript

前言

随着 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
  }
})

参考连接: