Vue父組件觸發(fā)子組件中的實(shí)現(xiàn)方法
更新時(shí)間：2025年01月30日 06:56:17 作者：孫 悟 空
文章總結(jié)：介紹了兩種實(shí)現(xiàn)父組件觸發(fā)子組件方法的常用方法：通過(guò)ref訪問(wèn)子組件實(shí)例并調(diào)用方法,以及使用自定義事件觸發(fā)子組件方法
有多種方法可以實(shí)現(xiàn)父組件觸發(fā)子組件中的方法，以下是其中兩種常用的方法：
1 通過(guò) ref 取得子組件實(shí)例并調(diào)用方法
父組件可以在模板中通過(guò) ref 給子組件命名，然后在父組件中使用 $refs 訪問(wèn)子組件實(shí)例的方法。
<!-- 父組件 -->
<template>
<div>
<button @click="callChildMethod">調(diào)用子組件方法</button>
<child-component ref="child"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
callChildMethod() {
this.$refs.child.childMethod(); //不傳參
this.$refs.child.childMethodParam(param); //可以直接向子組件傳遞參數(shù)param
}
}
}
</script>
在子組件中，需要在 methods 中定義要被調(diào)用的 childMethod 方法。
<!-- 子組件 -->
<template>
<div>
<!-- 組件內(nèi)容 -->
</div>
</template>
<script>
export default {
methods: {
childMethod() {
console.log('子組件方法被調(diào)用')
},
childMethodParam(param) {
console.log('子組件方法被調(diào)用，并接收到父組件傳遞過(guò)來(lái)的參數(shù)：',param)
}
}
}
</script>2 使用自定義事件
父組件可以在需要觸發(fā)子組件中的方法的時(shí)候，通過(guò) $emit 觸發(fā)自定義事件。然后在子組件中監(jiān)聽(tīng)該事件，在事件回調(diào)函數(shù)中執(zhí)行對(duì)應(yīng)的方法。
<!-- 父組件 -->
<template>
<div>
<button @click="callChildMethod">調(diào)用子組件方法</button>
<child-component @custom-event="onCustomEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
callChildMethod() {
this.$emit('custom-event')
},
onCustomEvent() {
console.log('custom-event 事件被觸發(fā)')
}
}
}
</script>
在子組件中，需要通過(guò) props 來(lái)接收父組件傳遞的自定義事件，并在 created 生命周期中對(duì)其進(jìn)行監(jiān)聽(tīng)。
<!-- 子組件 -->
<template>
<div>
<!-- 組件內(nèi)容 -->
</div>
</template>
<script>
export default {
props: ['customEvent'],
created() {
this.$on('custom-event', this.childMethod)
},
methods: {
childMethod() {
console.log('子組件方法被調(diào)用')
}
}
}
</script>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue操作DOM解決顯示位置問(wèn)題,文中通過(guò)代碼示例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-12-12
Vue動(dòng)態(tài)樣式方法實(shí)例總結(jié)
在vue項(xiàng)目中,很多場(chǎng)景要求我們動(dòng)態(tài)改變?cè)氐臉邮?下面這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)樣式方法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
vue中使用vue-router切換頁(yè)面時(shí)滾動(dòng)條自動(dòng)滾動(dòng)到頂部的方法
這篇文章主要介紹了vue項(xiàng)目中在使用vue-router切換頁(yè)面的時(shí)候滾動(dòng)條自動(dòng)滾動(dòng)到頂部的實(shí)現(xiàn)方法，一般使用Window scrollTo() 方法實(shí)現(xiàn)，本文給大家簡(jiǎn)單介紹了crollTop的使用,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了Vue3如何清空Reactive定義的數(shù)組問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
當(dāng)我們未設(shè)置keepAlive的最大緩存數(shù)時(shí),當(dāng)緩存組件太多,會(huì)導(dǎo)致內(nèi)存溢出,本文給大家介紹了vue3手動(dòng)刪除keepAlive緩存的方法,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
vuejs選中當(dāng)前樣式active的實(shí)例
今天小編就為大家分享一篇vuejs選中當(dāng)前樣式active的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
使用vue如何構(gòu)建一個(gè)自動(dòng)建站項(xiàng)目
這篇文章主要介紹了使用vue如何構(gòu)建一個(gè)自動(dòng)建站項(xiàng)目，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue中Echarts圖表寬度沒(méi)占滿(mǎn)的問(wèn)題
這篇文章主要介紹了vue中Echarts圖表寬度沒(méi)占滿(mǎn)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
使vue實(shí)現(xiàn)jQuery調(diào)用的兩種方法
這篇文章主要介紹了使vue實(shí)現(xiàn)jQuery調(diào)用的兩種方法 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
Vue3+Element?Plus動(dòng)態(tài)表單實(shí)現(xiàn)
本文主要介紹了Vue3+Element?Plus動(dòng)態(tài)表單實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-05-05