Vue3組件通信的具體用法實例

更新時間：2025年09月08日 09:02:28 作者：whhhhhhhhhw

在Vue.js3中,組件通信主要包括父子組件通信、兄弟組件通信以及祖孫組件通信,這篇文章主要介紹了Vue3組件通信具體用法的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言：

在組件化開發(fā)中，需要將頁面抽離成組件的形式，抽離之后就涉及到了組件中數(shù)據(jù)傳遞，可分為：父傳子（props）、子傳父（emits）、祖孫通信（provide和inject）、兄弟通信、全局通訊（pinia）。這次我就以博客的形式復習一下前三種通訊，想了解pinia可點擊看我前面寫的博客。

1.父傳子

首先需要在父組件中的子組件標簽中添加自定義屬性，將需要傳遞的值放如自定義屬性中，在子組件中通過defineProps這個方法獲取父組件傳遞過來的值。具體方法如下：

father.vue:

<template>
    <div class="father">
        <h2>父組件</h2>
        <!-- 使用自定義屬性傳統(tǒng)數(shù)據(jù) -->
        <Child :text="text" :sayHello="sayHello"></Child>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import Child from './Child.vue';
// state
const text = ref('我是父組件中的數(shù)據(jù)')
// function
function sayHello() {
    console.log('hello');
}
</script>

Chlid.vue:

<template>
    <div class="child">
        <div>子組件:{{ text }}</div>
        <div>子內容</div>
    </div>
</template>

<script setup>
// 接收父組件傳遞來的數(shù)據(jù)
const props = defineProps({
    text: String,
    sayHello: Function
})
// 判斷方法是否傳遞過來，是則執(zhí)行方法
if (props.sayHello) {
    props.sayHello()
}
</script>

從上可以看出，不只有數(shù)據(jù)可以傳遞，方法也是可以傳遞給子組件的。子組件在接收時，需要給數(shù)據(jù)標注類型。

2.子傳父

1.defineExpose+ref

使用defineExpose+ref的方式將子組件中的數(shù)據(jù)傳遞給父組件，首先在子組件中定義數(shù)據(jù)，使用defineExpose方法將數(shù)據(jù)暴露出去，在父組件中通過ref來接收。

chlid.vue:

<template>
    <div class="child">
        <div>子組件</div>
        <div>子內容</div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

// state
const childText = ref('我是子組件中的數(shù)據(jù)')
// function
function sayHelloFather() {
    console.log('hello father');
}
// 將子組件中的數(shù)據(jù)暴露出去
defineExpose({
    childText,
    sayHelloFather
})
</script>

father:

<template>
    <div class="father">
        <h2>父組件</h2>
        <!-- 使用自定義屬性傳統(tǒng)數(shù)據(jù) -->
        <Child ref="childRef"></Child>
    </div>
</template>

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

// 接收子組件中傳遞的數(shù)據(jù)
const childRef = ref({
    childText: String,
    sayHelloFather: Function
})

// 打印數(shù)據(jù)
onMounted(() => {
    console.log('childText:', childRef.value?.childText);
    childRef.value?.sayHelloFather()
})
</script>

2.v-model

知道了如何將子組件中的數(shù)據(jù)如何傳遞給父組件，那如何在子組件中修改父組件中的數(shù)據(jù)呢，使用到了v-model + defineEmits的方法，首先在父組件中定義一個數(shù)據(jù)，在其子組件標簽上添加v-model:名稱 = '定義的數(shù)據(jù)名稱'，在子組件中通過defineProps接收傳遞過來的數(shù)據(jù)，然后使用defineEmits通知父組件去修改數(shù)據(jù)，這邊我寫了一個小例子，代碼如下：

father.vue:

<template>
    <div class="father">
        <h2>父組件</h2>
        <div>{{ content }}</div>
        <Child v-model:content="content"></Child>
    </div>
</template>

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

const content = ref('content')
</script>

chlid.vue:

<template>
    <div class="child">
        <div>子組件</div>
        <input type="text" :value="prop.content" @input="handleInput">
    </div>
</template>

<script setup>
// 接收父組件傳遞過來的數(shù)據(jù)
const props = defineProps({
    content: String
})

const emits =  defineEmits(['update:content'])
function handleInput(e) {
    const target = e.target.value
    // 通知父組件修改數(shù)據(jù)
    emits('update:content', target)
}
</script>

這里例子的意思是，我修改表單的數(shù)據(jù)時，父組件中對應的數(shù)據(jù)也會跟著修改，這里有一點需要注意，在通知父組件修改數(shù)據(jù)的參數(shù)，第一個參數(shù)是update:content，需要加上update，content需要跟父組件中的子組件標簽上的v-model:content中content對應。

在實際開發(fā)中父傳子和子傳父是使用頻率最高的。

3.祖孫通信

當需要進行跨組件通信時可以使用到provide和inject（依賴注入）。

具體使用：在祖先組件中通過provide配置向后代組件提供數(shù)據(jù)。在后代組件中通過inject配置來聲明接收數(shù)據(jù)。

app.vue:

<template>
  <div class="app">
    <Father></Father>
  </div>
</template>

<script setup>
import { provide, ref } from 'vue';
import Father from './components/Father.vue';

// state
const grandFatherData = ref('我是App.vue中的數(shù)據(jù)，也就是你爺爺輩')
// function
function sayHello() {
  console.log('hello');
}
provide('appData', { grandFatherData, sayHello })
</script>

chlid.vue:

<template>
    <div class="child">
        <div>子組件</div>
        <div>app.vue傳來的數(shù)據(jù)：{{ data.grandFatherData }}</div>
    </div>
</template>

<script setup>
import { inject, onMounted } from 'vue';

const data = inject('appData')

onMounted(()=>{
    data.sayHello()
})
</script>

這樣我們就可以獲取到祖先組件傳來的數(shù)據(jù)了