Vue3.4中v-model雙向數(shù)據(jù)綁定新玩法詳解

更新時間：2024年03月22日 10:03:22 作者：前端開發(fā)愛好者

defineModel?是一個新的?<script?setup>?宏,旨在簡化支持?v-model?的組件的實現(xiàn),?這個宏用來聲明一個雙向綁定?prop,下面我們就來看看他的具體使用吧

前言

隨著 Vue3.4 版本的發(fā)布，defineModel 也正式轉(zhuǎn)正了。它可以簡化父子組件之間的雙向綁定，是目前官方推薦的雙向綁定實現(xiàn)方式。

之前在 Vue3.3 中，該方法還是實驗性方法，使用 defineModel 需在 vite.config.ts 里面配置 defineModel 為 true，配置如下：

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

但 Vue3.4 版本中已經(jīng)是穩(wěn)定特性了?。?！

正式介紹 defineModel

defineModel 是一個新的 <script setup> 宏，旨在簡化支持 v-model 的組件的實現(xiàn), 這個宏用來聲明一個雙向綁定 prop，通過父組件的 v-model 來使用。

它之前作為實驗性功能在 Vue3.3 中發(fā)布，并在 Vue3.4 中升級為穩(wěn)定狀態(tài)。現(xiàn)在，它還為 v-model修飾符的使用提供了更好的支持。

defineModel 使用

例舉一個最簡單的使用場景: 自定義組件中使用 v-model 來進行數(shù)據(jù)的雙向綁定

<!-- 父組件 -->
<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("前端開發(fā)愛好者");
</script>

在 Vue3.3 版本之前，我們通常通過 props 接收 modelValue，然后在更新時，我們會將更新后的值傳遞給 emit 的 update:modelValue 并執(zhí)行:

<!-- 子組件 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>

帶參數(shù)/定義多個 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("前端開發(fā)愛好者");
const title = ref("前端開發(fā)愛好者_title");
const subTitle = ref("前端開發(fā)愛好者_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>

修飾符和轉(zhuǎn)換器

為了獲取 v-model 指令使用的修飾符，我們可以像這樣解構(gòu) defineModel() 的返回值：

const [modelValue, modelModifiers] = defineModel()

// 對應 v-model.trim
if (modelModifiers.trim) {
  // ...
}

當存在修飾符時，我們可能需要在讀取或?qū)⑵渫交馗附M件時對其值進行轉(zhuǎn)換。我們可以通過使用 get 和 set 轉(zhuǎn)換器選項來實現(xiàn)這一點：

const [modelValue, modelModifiers] = defineModel({
  // get() 省略了，因為這里不需要它
  set(value) {
    // 如果使用了 .trim 修飾符，則返回裁剪過后的值
    if (modelModifiers.trim) {
      return value.trim()
    }
    // 否則，原樣返回
    return value
  }
})

參考連接: