前言

作為現(xiàn)代前端開(kāi)發(fā)中的重要框架之一，Vue.js一直致力于提供更加方便、高效的數(shù)據(jù)管理方式。在Vue 3中，v-model這一指令也得到了升級(jí)，使得父子組件之間的數(shù)據(jù)同步變得更加容易和靈活。本文將探討一下Vue 3中如何利用v-model來(lái)實(shí)現(xiàn)父子組件之間的數(shù)據(jù)同步

一、v-model實(shí)現(xiàn)父子組件之間的數(shù)據(jù)同步

在Vue 3中，可以在<script setup>中使用defineEmits和defineProps來(lái)定義props和event。使用v-model時(shí)需要定義一個(gè)名為modelValue的prop和一個(gè)update:modelValue的event，代碼示例如下：

• 子組件

<template>
  <div>
    <h3>子組件</h3>
    <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})

const emits = defineEmits(['update:modelValue'])
</script>

在父組件中使用v-model時(shí)，可以通過(guò)v-model:propName綁定子組件的modelValue prop和update:modelValue event。代碼示例如下：

• 父組件

<template>
  <div>
    <h3>父組件</h3>
    <ChildComponent v-model:modelValue="message" />
    <p>子組件輸入的內(nèi)容：{{ message }}</p>
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'

let message = ''
</script>

原理是，在子組件中，v-model會(huì)將modelValue prop和update:modelValue event綁定在一起，當(dāng)子組件的input事件觸發(fā)時(shí)會(huì)emit一個(gè)update:modelValue event，從而更新父組件的message。而在父組件中，v-model會(huì)將message與modelValue prop和update:modelValue event綁定在一起，當(dāng)父組件更新message時(shí)，會(huì)通過(guò)modelValue prop將message傳遞給子組件，在子組件中輸入內(nèi)容時(shí)，會(huì)通過(guò)update:modelValue event將新的內(nèi)容傳遞給父組件更新message。這樣就實(shí)現(xiàn)了父子組件之間的數(shù)據(jù)同步。

其中， v-model 相當(dāng)于以下代碼：

<template>
  <ChildComponent :modelValue="message" @update:modelValue="val => message= val"></Child> 
</template>

這樣就可以在父組件和子組件之間實(shí)現(xiàn)雙向數(shù)據(jù)綁定。當(dāng)子組件的值發(fā)生變化時(shí)，會(huì)觸發(fā) update 事件傳遞給父組件，父組件接收到事件后會(huì)更新自己的值并重新渲染子組件。當(dāng)父組件的值發(fā)生變化時(shí)，會(huì)通過(guò) value prop 傳遞給子組件，子組件接收到 prop 后會(huì)更新自己的值并重新渲染。

二、v-model綁定多個(gè)值

1. 通過(guò)對(duì)象的方式

在Vue3的<script setup>中，可以使用v-model指令實(shí)現(xiàn)父子組件之間的雙向數(shù)據(jù)綁定。如果需要同時(shí)綁定多個(gè)值，可以使用一個(gè)對(duì)象來(lái)存儲(chǔ)這些值，然后在子組件中使用$emit方法將這個(gè)對(duì)象作為參數(shù)傳遞給父組件。

舉個(gè)例子，假設(shè)有一個(gè)父組件Parent和一個(gè)子組件Child，需要同時(shí)綁定一個(gè)名字和年齡?？梢栽诟附M件中定義一個(gè)對(duì)象person，然后使用v-model指令來(lái)綁定它：

<template>
  <Child v-model="person"/>
</template>

<script setup>
import Child from './Child.vue'

const person = {
  name: 'John',
  age: 20
}
</script>

在子組件中，可以通過(guò)props接收父組件傳遞過(guò)來(lái)的person對(duì)象，并在模板中使用v-model指令將每個(gè)屬性與輸入框綁定：

<template>
  <div>
    <label>Name:</label>
    <input v-model="person.name">
    <label>Age:</label>
    <input v-model="person.age">
  </div>
</template>

<script setup>
props: {
  modelValue: Object
}

const person = ref(modelValue)

watchEffect(() => {
  emit('update:modelValue', person.value)
})
</script>

注意，在子組件中需要使用props來(lái)接收modelValue，這是v-model指令默認(rèn)傳遞的值。然后將這個(gè)對(duì)象轉(zhuǎn)換為響應(yīng)式對(duì)象，并使用watchEffect函數(shù)監(jiān)聽(tīng)它的變化。調(diào)用emit('update:modelValue', person.value)時(shí)會(huì)將新的person對(duì)象作為參數(shù)傳遞給Parent組件。Parent組件會(huì)自動(dòng)將其更新到person屬性中。

通過(guò)這種方式，可以同時(shí)綁定多個(gè)值，并實(shí)現(xiàn)父子組件之間的雙向數(shù)據(jù)綁定。

2. 使用多個(gè)v-model

在子組件中，可以使用$emit()方法將綁定的值發(fā)送到父組件中，從而實(shí)現(xiàn)父子組件之間的雙向數(shù)據(jù)綁定。具體操作可以參考以下代碼示例：

父組件中使用方式：

<template>
	<h1>父組件中顯示v-model{{pageNo}}{{pageSize}}</h1>
	<Child v-model:pageNo="pageNo" v-model:pageSize="pageSize"></Child>
</template>
<script setup>
import {ref} from 'vue'
//父親的數(shù)據(jù)
let pageNo = ref(1);
let pageSize = ref(3);
</script>

子組件中的代碼示例：

<template>
  <div>
    <p>當(dāng)前頁(yè)數(shù): {{ pageNo }}</p>
    <p>每頁(yè)數(shù)量: {{ pageSize }}</p>
    <button @click="increasePageNo">增加頁(yè)數(shù)</button>
    <button @click="increasePageSize">增加每頁(yè)數(shù)量</button>
  </div>
</template>

<script setup>
	let props = defineProps(["pageNo", "pageSize"]);
	let $emit = defineEmits(["update:pageNo", "update:pageSize"]);

  const increasePageNo = () => {
    const increasedPageNo = parseInt(pageNo) + 1
    $emit('update:pageNo', increasedPageNo)
  }

  const increasePageSize = () => {
    const increasedPageSize = parseInt(pageSize) + 1
    $emit('update:pageSize', increasedPageSize)
  }
</script>

在子組件中，使用defineEmits()函數(shù)定義了兩個(gè)事件，分別是update:pageNo和update:pageSize，用來(lái)在父組件中更新pageNo和pageSize的值。同時(shí)，也定義了兩個(gè)方法increasePageNo和increasePageSize，用來(lái)修改當(dāng)前頁(yè)數(shù)和每頁(yè)數(shù)量。

在方法中，使用$emit()方法觸發(fā)對(duì)應(yīng)的事件，傳遞修改后的值。父組件通過(guò)v-model綁定子組件中的屬性，當(dāng)子組件修改值時(shí)，會(huì)觸發(fā)相應(yīng)的事件，從而更新父組件中對(duì)應(yīng)的值。

三、總結(jié)

在Vue3中，通過(guò)v-model我們可以方便地實(shí)現(xiàn)父子組件之間的數(shù)據(jù)雙向綁定。在使用過(guò)程中，需要注意v-mode的本質(zhì)是語(yǔ)法糖，實(shí)際上是通過(guò)props和emit來(lái)實(shí)現(xiàn)數(shù)據(jù)傳遞和事件的觸發(fā)。此外，我們還可以通過(guò).sync修飾符和自定義事件來(lái)實(shí)現(xiàn)類似于v-model的效果。總之，利用v-model實(shí)現(xiàn)父子組件之間的數(shù)據(jù)同步是Vue3中一個(gè)非常實(shí)用且易于上手的特性，值得我們?cè)趯?shí)際項(xiàng)目開(kāi)發(fā)中多加利用。

以上就是vue3利用v-model實(shí)現(xiàn)父子組件之間數(shù)據(jù)同步的代碼詳解的詳細(xì)內(nèi)容，更多關(guān)于vue3 v-model父子組件數(shù)據(jù)同步的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論