前言

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

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

在Vue 3中，可以在<script setup>中使用defineEmits和defineProps來定義props和event。使用v-model時需要定義一個名為modelValue的prop和一個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時，可以通過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會將modelValue prop和update:modelValue event綁定在一起，當(dāng)子組件的input事件觸發(fā)時會emit一個update:modelValue event，從而更新父組件的message。而在父組件中，v-model會將message與modelValue prop和update:modelValue event綁定在一起，當(dāng)父組件更新message時，會通過modelValue prop將message傳遞給子組件，在子組件中輸入內(nèi)容時，會通過update:modelValue event將新的內(nèi)容傳遞給父組件更新message。這樣就實現(xiàn)了父子組件之間的數(shù)據(jù)同步。

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

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

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

二、v-model綁定多個值

1. 通過對象的方式

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

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

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

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

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

在子組件中，可以通過props接收父組件傳遞過來的person對象，并在模板中使用v-model指令將每個屬性與輸入框綁定：

<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來接收modelValue，這是v-model指令默認(rèn)傳遞的值。然后將這個對象轉(zhuǎn)換為響應(yīng)式對象，并使用watchEffect函數(shù)監(jiān)聽它的變化。調(diào)用emit('update:modelValue', person.value)時會將新的person對象作為參數(shù)傳遞給Parent組件。Parent組件會自動將其更新到person屬性中。

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

2. 使用多個v-model

在子組件中，可以使用$emit()方法將綁定的值發(fā)送到父組件中，從而實現(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)前頁數(shù): {{ pageNo }}</p>
    <p>每頁數(shù)量: {{ pageSize }}</p>
    <button @click="increasePageNo">增加頁數(shù)</button>
    <button @click="increasePageSize">增加每頁數(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ù)定義了兩個事件，分別是update:pageNo和update:pageSize，用來在父組件中更新pageNo和pageSize的值。同時，也定義了兩個方法increasePageNo和increasePageSize，用來修改當(dāng)前頁數(shù)和每頁數(shù)量。

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

三、總結(jié)

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

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

最新評論