快捷導(dǎo)航

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

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

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

前言

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

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

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

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

正式介紹 defineModel

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

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

defineModel 使用

例舉一個(gè)最簡(jiǎn)單的使用場(chǎng)景: 自定義組件中使用 v-model 來(lái)進(jìn)行數(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，然后在更新時(shí)，我們會(huì)將更新后的值傳遞給 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ù)/定義多個(gè) v-model

組件中可以支持定義多個(gè) defineModel，可以滿足綁定多個(gè)雙向綁定的屬性

<!-- 父組件 -->
<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ā)愛好者_(dá)title");
const subTitle = ref("前端開發(fā)愛好者_(dá)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()

// 對(duì)應(yīng) v-model.trim
if (modelModifiers.trim) {
  // ...
}

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

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

參考連接:

blog.vuejs.org/posts/vue-3-4
cn.vuejs.org/api/sfc-script-setup.html#definemodel

結(jié)語(yǔ)

defineModel 的引入標(biāo)志著 Vue 在提升開發(fā)者體驗(yàn)方面邁出了重要的一步?，F(xiàn)在，開發(fā)者可以更加專注于應(yīng)用的邏輯和用戶體驗(yàn)，而不是糾結(jié)于數(shù)據(jù)綁定的細(xì)節(jié)。讓我們一起迎接 Vue 3.4 帶來(lái)的更多可能性吧！

以上就是Vue3.4中v-model雙向數(shù)據(jù)綁定新玩法詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue v-model雙向數(shù)據(jù)綁定的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: