前言

父子組件通信，作為Vue應(yīng)用開發(fā)中不可或缺的一部分，是實現(xiàn)數(shù)據(jù)流動、事件觸發(fā)以及組件間互動的關(guān)鍵機制。無論是簡單的屬性傳遞，還是復(fù)雜的交互邏輯，掌握這一技能對于構(gòu)建富有層次感和互動性的用戶界面至關(guān)重要。通過學(xué)習(xí)如何有效地利用props進行數(shù)據(jù)下行傳遞，使用emit觸發(fā)自定義事件，以及借助ref直接操作子組件。本文將詳細(xì)探討Vue 3中的父子組件通信，幫助你深入了解并掌握這些核心概念。

父傳子

使用Props傳遞數(shù)據(jù)和方法

在Vue中，父組件向子組件傳遞數(shù)據(jù)最常用的方法是通過props。props允許父組件以一種聲明式的方式向下傳遞數(shù)據(jù)到子組件。這種方式不僅簡化了數(shù)據(jù)流的管理，還確保了組件之間的單向數(shù)據(jù)綁定，使得狀態(tài)更易于追蹤和調(diào)試。

代碼模塊

App.vue

<script setup>
import ChildComponent from './components/ChildComponent.vue'
import { ref } from 'vue'
const title=ref("來自父組件的消息")
const method =()=>{
    console.log("來自父組件的方法")
}
</script>

<template>
   <div>
   
      <h2>父組件</h2>
       <ChildComponent :title="title" :parentmethod="method" />
   </div>
</template>

<style scoped>

</style>

解析：

• const title：創(chuàng)建了一個響應(yīng)式的引用（ref），它的值是“來自父組件的消息”。這個引用可以被傳遞給子組件，并且如果在父組件中修改了它的值，子組件會自動更新。
• const method：定義了一個簡單的方法，當(dāng)它被執(zhí)行時，會在瀏覽器的控制臺輸出一條信息。
• :title="title" 的意思就是：將父組件中的title響應(yīng)式變量的值綁定到子組件的title prop上。每當(dāng)父組件中的title發(fā)生變化時，子組件也會自動更新其對應(yīng)的title prop，并反映出最新的值。:parentmethod="method"同理

ChildComponent.vue

<template>
    <div>
      在子組件中： {{props.title}}
      <button @click="props.parentmethod">子組件調(diào)用父組件的方法</button>
    </div>
</template>

<script setup>
import {
    defineProps,
    ref
} from 'vue'
const props=defineProps({
    title:{
        type:String,
        required:true
    },
    parentmethod:{
        type:Function,
        required:true
    }

})
</script>

<style  scoped>

</style>

• 接收props：子組件通過defineProps聲明了它期望從父組件接收兩個props：title 和 parentmethod。根據(jù)填寫required的true|flase，是否判斷必需傳入。這兩個props都是必需的，并且有type來定義明確的類型。
• 顯示props：在模板中，子組件使用{{ props.title }}來顯示父組件傳遞過來的標(biāo)題。
• 調(diào)用父組件方法：子組件還包含了一個按鈕，其點擊事件被綁定到了props.parentmethod。這意味著當(dāng)用戶點擊按鈕時，子組件會觸發(fā)父組件中定義的方法。由于parentmethod是從父組件傳入的一個函數(shù)引用，因此它會在父組件的作用域內(nèi)執(zhí)行。
• 響應(yīng)性：因為title是一個響應(yīng)式的prop，如果父組件更新了它的值，子組件也會自動重新渲染以反映最新的標(biāo)題。

效果：

子傳父

使用Emit觸發(fā)自定義事件

子組件與父組件通信的主要方式之一是通過emit觸發(fā)自定義事件。當(dāng)子組件想要通知父組件某個特定事件發(fā)生時，它可以調(diào)用emit來觸發(fā)一個命名事件，并可以選擇性地傳遞額外的數(shù)據(jù)。 App.vue

<script setup>
import ChildComponent from './components/ChildComponent.vue'
import { ref } from 'vue'
const title=ref("來自父組件的消息")
const method =()=>{
    console.log("來自父組件的方法")
}
const messageFromChild=ref("")
const handleChildMessage = (message) => {
    console.log('來自子組件的消息:', message);
    messageFromChild.value=message
    // 在這里可以處理子組件發(fā)送的消息
};
</script>

<template>
   <div>
       
      <h2>父組件</h2>
       <ChildComponent :title="title" :parentmethod="method"  @child-message="handleChildMessage"/>
       <p>來自子組件的消息：{{messageFromChild}}</p>
   </div>
</template>

<style scoped>

</style>

• @child-message="handleEvent" 自定義事件名稱 attrs + 處理函數(shù)
  • child-message：這是你為子組件定義的一個自定義事件名稱。它不是內(nèi)置的DOM事件（如click、input等），而是由開發(fā)者根據(jù)需求命名的。通過這個名稱，子組件可以觸發(fā)特定事件并向父組件傳遞數(shù)據(jù)。
  • handleEvent：這是父組件中定義的一個方法，用來處理來自子組件的消息。當(dāng)你在父組件模板中使用@child-message="handleEvent"時，實際上是在說：“每當(dāng)子組件觸發(fā)child-message事件時，請調(diào)用handleEvent方法”。

ChildComponent.vue

<template>
    <div>
      在子組件中： {{props.title}}
      <hr>
      <button @click="props.parentmethod">子組件調(diào)用父組件的方法</button>
      <hr>
      <button @click="childMessage">子組件給父組件發(fā)送數(shù)據(jù)</button>
    </div>
</template>

<script setup>
import {
    defineProps,
    ref,
    defineEmits,

} from 'vue'
const props=defineProps({
    title:{
        type:String,
        required:true
    },
    parentmethod:{
        type:Function,
        required:true
    }

})
const emit = defineEmits(['child-message'])
const childMessage = () => {
    emit('child-message', '我是子組件');
  };
</script>

<style  scoped>

</style>

解析：

• const emit = defineEmits(['child-message'])
  • defineEmits：這是Vue Composition API的一部分，用于定義子組件可以觸發(fā)的自定義事件列表。它返回一個函數(shù)emit，該函數(shù)可以用來觸發(fā)這些事件。
  • ['child-message'] ：這里是一個字符串?dāng)?shù)組，列出了所有可以由子組件觸發(fā)的自定義事件名稱。在這個例子中，我們只定義了一個名為child-message的事件，如果有多個事件，可以通過數(shù)組的形式添加。
• const childMessage....
  • emit('child-message', '我是子組件') ：調(diào)用emit函數(shù)來觸發(fā)一個名為child-message的自定義事件，并傳遞一個字符串'我是子組件'作為參數(shù)。這個消息會被發(fā)送給監(jiān)聽了child-message事件的父組件。

效果：

圖解：

當(dāng)我們實現(xiàn)完子組件向父組件，傳遞信息后，那么長的帥的讀者就要問了？怎么向父組件傳遞方法呢？

使用ref實現(xiàn)子組件對父組件的傳遞

創(chuàng)建響應(yīng)式引用：

大家都知道ref 可以用來創(chuàng)建一個響應(yīng)式的變量，該變量可以被綁定到模板中的元素或組件上。當(dāng)這個變量的值發(fā)生變化時，視圖會自動更新。

  import { ref } from 'vue'
    const count = ref(0)

訪問子組件實例：

當(dāng)你需要直接與子組件進行交互時（比如調(diào)用子組件的方法或訪問它的屬性），可以通過給子組件添加 ref 屬性來獲取子組件的實例。

代碼：

我們可以先看子組件向父組件輸出了什么？ parent組件:

<template>
    <div>
      <Child ref="comp" />
      <button @click="handlerClick">按鈕</button>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const comp = ref(null) // 標(biāo)記DOM 元素  null 組件沒用掛載，DOM 也不在 
const title = ref('hello') // 標(biāo)記數(shù)據(jù)
const handlerClick = ()=>{
    console.log(comp,comp.value)
   console.log( comp.value.childName)
   comp.value.someMethod()
}

</script>
<style  scoped>
</style>

child組件：

<template>
    <div>
       Child
    </div>
</template>

<script setup>
import {
    defineProps,
    defineEmits,
    defineExpose,
    ref
} from 'vue'
defineExpose({
    childName:"這是子組件的屬性",
    someMethod:()=>{
        console.log('這是子組件的方法')
    }
})
</script>
<style  scoped>

</style>

解析：

• 重點： <Child ref="comp" />：這里定義了一個子組件Child，并通過ref屬性給它指定了一個名為comp的引用。這使得父組件可以在JavaScript中直接訪問這個子組件實例，調(diào)用子組件的方法和屬性。

• defineExpose({ ... })：這是Vue Composition API的一部分，用來明確哪些屬性或方法應(yīng)該暴露給父組件。在這個例子中，我們暴露了兩個成員：

  • childName：一個字符串，作為子組件的一個公開屬性。
  • someMethod：一個函數(shù)，作為子組件的一個公開方法，可以被父組件調(diào)用。

• 最后在父組件就可以通過 comp.value.,調(diào)用方法或者屬性。

運行機制

• 掛載階段：當(dāng)父組件首次渲染時，子組件也會一同被掛載。此時，comp.value會被更新為指向子組件的實例。

• 點擊按鈕：用戶點擊按鈕后，handlerClick函數(shù)被執(zhí)行。由于此時子組件已經(jīng)掛載完成，因此可以通過comp.value訪問到子組件實例，并且可以安全地調(diào)用它的公開屬性和方法。

• 輸出結(jié)果：

  • 控制臺首先會打印出comp引用及其當(dāng)前值（即子組件實例）。
  • 接著會打印出子組件的childName屬性值：“這是子組件的屬性”。
  • 最后，調(diào)用子組件的someMethod方法，在控制臺上輸出：“這是子組件的方法”。

效果：

總結(jié)：

• 父傳子 - 使用props傳遞數(shù)據(jù)和方法：父組件可以通過props將數(shù)據(jù)和方法傳遞給子組件，這種方式不僅簡化了數(shù)據(jù)流的管理，還確保了組件之間的單向數(shù)據(jù)綁定，使得狀態(tài)更易于追蹤和調(diào)試。
• 子傳父 - 使用emit觸發(fā)自定義事件：子組件可以通過emit觸發(fā)自定義事件來通知父組件某些特定事件的發(fā)生，并可以選擇性地傳遞額外的數(shù)據(jù)。父組件可以通過監(jiān)聽這些事件來做出相應(yīng)的反應(yīng)。
• 使用ref直接操作子組件實例：當(dāng)需要直接與子組件進行交互時，比如調(diào)用子組件的方法或訪問它的屬性，可以通過給子組件添加ref屬性來獲取子組件的實例。借助defineExpose，可以有選擇性地暴露子組件的屬性和方法給父組件。

以上就是Vue3中父子組件之間相互通信的方式詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue3父子組件通信方式的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論