vue3中setup語法糖下父子組件之間如何傳遞數(shù)據(jù)

先弄明白什么是父子組件

?父子組件，分為父組件和子組件。

Vue3中，父組件指的是包含一個或多個子組件的組件，它們通過props和事件等方式來傳遞數(shù)據(jù)和通信。子組件則是被父組件所包含的組件，它們通常會接收來自父組件的數(shù)據(jù)，并根據(jù)這些數(shù)據(jù)渲染自身。在Vue3中，使用<template>標(biāo)簽來定義父組件和子組件，同時也可以使用其他標(biāo)簽如<div>, <span>等等。

父傳子

在Vue 3的<script setup>語法糖中，父組件向子組件傳遞數(shù)據(jù)可以通過props實現(xiàn)。而子組件接收父組件傳遞過來的數(shù)據(jù)也是通過props進(jìn)行。

下面以一個簡單的例子來說明：

???父組件：（文件名為ParentComponent.vue）
html代碼

<template>
  <div>
    <h1>{{ message }}</h1>
    <ChildComponent :childMessage="message" />
  </div>
</template>

js代碼

<script setup>
import ChildComponent from './ChildComponent.vue';
const message = 'Hello, Vue3!';
</script>

???子組件：（文件名為ChildComponent.vue）
html代碼

<template>
  <div>
    <h2>{{ childMessage }}</h2>
  </div>
</template>

js代碼

<template>
  <div>
    <h2>{{ childMessage }}</h2>
  </div>
</template>

在父組件中，我們定義了一個message變量，并將其作為prop傳遞給子組件。在子組件中，我們通過聲明式props接收了父組件傳遞過來的childMessage變量，并將其顯示在頁面上。

如此一來，父組件就可以向子組件傳遞數(shù)據(jù)了。如果需要更新數(shù)據(jù)，則可以在父組件中直接修改message變量即可。由于子組件接收的是prop值的副本，所以不會影響到原始數(shù)據(jù)。

子傳父

在Vue 3的<script setup>語法糖中，子組件向父組件傳遞數(shù)據(jù)可以通過emit事件實現(xiàn)。而父組件接收子組件傳遞過來的數(shù)據(jù)也是通過監(jiān)聽emit事件進(jìn)行。

???父組件：（文件名為ParentComponent.vue）
html代碼

<template>
  <div>
    <h1>{{ message }}</h1>
    <ChildComponent @update-message="handleUpdateMessage" />
  </div>
</template>

js代碼

<script setup>
import ChildComponent from './ChildComponent.vue';
const message = 'Hello, Vue3!';
function handleUpdateMessage(newMessage) {
  message.value = newMessage;
}
</script>

???子組件：（文件名為ChildComponent.vue）
html代碼

<template>
  <div>
    <input v-model="childMessage" />
    <button @click="handleClick">Update Message</button>
  </div>
</template>

js代碼

<script setup props="['childMessage']" emits="update-message">
import { defineEmits } from 'vue';
const emit = defineEmits(['update-message']);
function handleClick() {
  emit('update-message', childMessage.value);
}
</script>

同理
在子組件中，我們首先定義了emits屬性，并聲明了要發(fā)射的事件名為update-message。然后，在處理點擊事件的函數(shù)中，我們通過emit()方法觸發(fā)了該事件，并將輸入框中綁定的childMessage值作為參數(shù)傳遞給了父組件。

在父組件中，我們使用@update-message監(jiān)聽了子組件發(fā)射的update-message事件，并調(diào)用了名為handleUpdateMessage()的方法來更新父組件的message變量。

如此一來，子組件就可以向父組件傳遞數(shù)據(jù)了。如果需要更新數(shù)據(jù)，則可以在子組件中通過emit事件將新的值傳遞給父組件。由于父組件監(jiān)聽了該事件，所以會及時接收到傳遞過來的值，并進(jìn)行相應(yīng)的處理。

組件間通信都有哪些方式

在vue框架中，能實現(xiàn)組件間通信的，不只有父子組件一種。總結(jié)一下有以下4種：

父子組件通信：
通過 props 屬性將數(shù)據(jù)從父組件傳遞給子組件，通過 $emit方法觸發(fā)事件并傳遞數(shù)據(jù)來實現(xiàn)子組件向父組件通信。

兄弟組件通信：
可以使用一個共同的父組件作為中介，在兄弟組件中分別通過 $parent屬性訪問該父組件，并通過該父組件來進(jìn)行數(shù)據(jù)傳遞和事件觸發(fā)。

跨級祖先后代組件通信：
可以使用 provide 和 inject 來進(jìn)行跨級傳遞數(shù)據(jù)，或者使用 event bus（事件總線）等方式來實現(xiàn)。

Vuex 狀態(tài)管理器：Vuex 是一種專門用于 Vue應(yīng)用程序狀態(tài)管理的庫。它提供了集中式存儲管理應(yīng)用程序的所有組件的狀態(tài)，并提供了一些規(guī)則來保證狀態(tài)變更是可預(yù)測的。通過 Vuex 的 store 實例，不同的 Vue 組件可以共享同一個狀態(tài)，并且對這個狀態(tài)進(jìn)行更改會被自動監(jiān)控到。因此，在需要大量復(fù)雜交互場景下建議使用Vuex 進(jìn)行全局狀態(tài)管理。

父子組件通信和兄弟組件通信的區(qū)別

一般最常用的就是父子組件和兄弟組件的通信，兩種通信到底有何區(qū)別？也可以總結(jié)出3點不同之處：

1.父子組件之間的通信是單向的，即父組件向子組件傳遞數(shù)據(jù)或子組件向父組件傳遞數(shù)據(jù)，而兄弟組件之間的通信是雙向的，即兄弟組件之間可以相互傳遞數(shù)據(jù)。
2.父子組件之間的通信通常使用props和自定義事件，而兄弟組件之間的通信通常使用Vue的全局事件或Vuex。
3.父子組件之間的通信通常比較簡單，適用于組件之間的簡單交互，而兄弟組件之間的通信通常比較復(fù)雜，適用于組件之間的高級交互，例如多級組件之間的聯(lián)動。

到此這篇關(guān)于vue3中setup語法糖下父子組件之間如何傳遞數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue3父子組件傳遞數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論