Vue子組件調(diào)用父組件的三種方法(附詳細代碼演示)
更新時間：2025年07月28日 10:05:01 作者：AL.千燈學長
我們在使用vue做前端代碼的時候,經(jīng)常出現(xiàn)父組件調(diào)用子組件的場景需求,這篇文章主要介紹了Vue子組件調(diào)用父組件的三種方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
一、組件通信背景
在Vue開發(fā)中，父子組件通信是常見需求。遵循單向數(shù)據(jù)流原則，子組件通常通過觸發(fā)事件的方式與父組件交互。以下是3種常用方法：
二、方法實現(xiàn)
方法1：$emit觸發(fā)自定義事件（推薦）
原理：子組件通過$emit觸發(fā)事件，父組件通過v-on監(jiān)聽
<!-- 父組件 Parent.vue -->
<template>
<Child @show-message="handleMessage" />
</template>
<script>
export default {
methods: {
handleMessage(msg) {
console.log('收到子組件消息:', msg)
}
}
}
</script>
<!-- 子組件 Child.vue -->
<template>
<button @click="sendMessage">發(fā)送消息</button>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('show-message', 'Hello from Child!')
}
}
}
</script>
方法2：通過Props傳遞回調(diào)函數(shù)
原理：父組件通過props傳遞函數(shù)，子組件直接調(diào)用
<!-- 父組件 Parent.vue -->
<template>
<Child :callback="handleCallback" />
</template>
<script>
export default {
methods: {
handleCallback(data) {
console.log('回調(diào)數(shù)據(jù):', data)
}
}
}
</script>
<!-- 子組件 Child.vue -->
<template>
<button @click="executeCallback">執(zhí)行回調(diào)</button>
</template>
<script>
export default {
props: ['callback'],
methods: {
executeCallback() {
this.callback({ status: 'success' })
}
}
}
</script>
方法3：使用v-model/.sync（雙向綁定）
原理：通過雙向綁定語法糖實現(xiàn)數(shù)據(jù)同步（Vue2/Vue3實現(xiàn)不同）
Vue2實現(xiàn)：
<!-- 父組件 Parent.vue -->
<template>
<Child v-model="message" />
<!-- 或 -->
<Child :visible.sync="dialogVisible" />
</template>
<script>
export default {
data() {
return {
message: '',
dialogVisible: false
}
}
}
</script>
<!-- 子組件 Child.vue -->
<script>
export default {
props: ['value'], // v-model默認prop
methods: {
updateValue() {
this.$emit('input', 'new value')
},
closeDialog() {
this.$emit('update:visible', false)
}
}
}
</script>
Vue3實現(xiàn)：
<!-- 父組件 Parent.vue -->
<template>
<Child v-model:message="msg" />
</template>
<!-- 子組件 Child.vue -->
<script setup>
const props = defineProps(['message'])
const emit = defineEmits(['update:message'])
const update = () => {
emit('update:message', 'new value')
}
</script>
三、方法對比
| 方法 | 適用場景 | 優(yōu)點 | 注意事項 |
|---|---|---|---|
| $emit | 常規(guī)事件通信 | 符合Vue設(shè)計模式，直觀清晰 | 事件名需保持一致 |
| Props回調(diào) | 需要傳遞多個函數(shù)時 | 類似React模式，靈活度高 | 需注意函數(shù)引用穩(wěn)定性 |
| v-model | 表單組件/雙向綁定需求 | 語法簡潔，減少代碼量 | Vue2/Vue3實現(xiàn)方式不同 |
| .sync修飾符 | 多個prop需要雙向綁定（Vue2特有） | 簡化多個prop更新邏輯 | Vue3中已合并到v-model語法 |
四、最佳實踐建議
- 優(yōu)先使用$emit：符合Vue的事件驅(qū)動設(shè)計理念
- 復雜場景使用Vuex/Pinia：跨層級組件通信建議使用狀態(tài)管理工具
- 注意版本差異：
- Vue2使用
.sync需要顯式聲明 - Vue3使用
v-model:propName形式
- Vue2使用
- 保持單向數(shù)據(jù)流：避免直接修改父組件傳遞的props
五、常見應用場景
- 表單提交數(shù)據(jù)回傳
- 模態(tài)框關(guān)閉控制
- 列表項狀態(tài)更新
- 復雜組件的狀態(tài)聯(lián)動
到此這篇關(guān)于Vue子組件調(diào)用父組件的三種方法的文章就介紹到這了,更多相關(guān)Vue子組件調(diào)用父組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
最近正在使用Pinia進行狀態(tài)管理,我希望在重新刷新頁面時保持狀態(tài),下面這篇文章主要給大家介紹了關(guān)于Pinia簡單使用以及數(shù)據(jù)持久化的相關(guān)資料,需要的朋友可以參考下2022-05-05
本文主要介紹了django+vue項目搭建實現(xiàn)前后端通信，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
Vue-cli@3.0 是一個全新的 Vue 項目腳手架。這篇文章主要介紹了Vue-cli@3.0 插件系統(tǒng)簡析,需要的朋友可以參考下2018-09-09
Pinia是Vue3的狀態(tài)管理庫,替代Vuex,支持跨組件共享狀態(tài)、修改數(shù)據(jù)及持久化存儲,通過pinia-plugin-persist插件實現(xiàn)數(shù)據(jù)持久化,需在main.ts和store配置中引入,本文給大家介紹Vue3中的存儲庫pinia,感興趣的朋友一起看看吧2025-06-06
這篇文章主要介紹了mint-ui如何自定義messageBox樣式問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue3中ref和reactive的基本使用及區(qū)別詳析
這篇文章主要給大家介紹了關(guān)于Vue3中ref和reactive的基本使用及區(qū)別的相關(guān)資料,需要的朋友可以參考下2022-07-07
Vue.js作為現(xiàn)代前端開發(fā)中的佼佼者,其組件系統(tǒng)是構(gòu)建高效、靈活和可擴展用戶界面的關(guān)鍵,本文帶大家深度探索?Vue.js?組件的核心奧義,感興趣的小伙伴可以了解下2024-12-12
vue父組件給子組件的組件傳值provide inject的方法
在本篇文章里小編給大家整理的是一篇關(guān)于vue父組件給子組件的組件傳值provide inject的方法，需要的朋友們學習下。2019-10-10
VUE是一套前端框架，免除了原生JavaScript中的DOM操作，簡化書寫。VUE基于MVVM（Model-View_ViewModel）思想，實現(xiàn)數(shù)據(jù)雙向綁定。Vue的核心庫只關(guān)注圖層.響應式數(shù)據(jù)綁定和組件化開發(fā)是其兩大特點。2023-01-01
vue項目優(yōu)化之通過keep-alive數(shù)據(jù)緩存的方法
本篇文章主要介紹了vue項目優(yōu)化之通過keep-alive數(shù)據(jù)緩存的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12