Vue子組件關(guān)閉后調(diào)用刷新父組件的實(shí)現(xiàn)
實(shí)現(xiàn)效果



調(diào)用方法
當(dāng)在子組件里更改了某些信息且關(guān)閉子組件后,需要父組件更新修改后的內(nèi)容,操作如下:
1、$emit觸發(fā)
父組件 @update="update(val)"
子組件 this.$emit('update', newVal)2、使用$parent觸發(fā)父組件
更新數(shù)據(jù)是由某個(gè)方法觸發(fā),如getList()
子組件 this.$parent.getList()
常見問題
在開發(fā) Vue 項(xiàng)目中,遇到了一個(gè)這樣的問題:
其中UI框架使用的是iview UI , 在子組件中利用 this.$parent.getList() 調(diào)用父組件中的 getList() 方法, 發(fā)現(xiàn)調(diào)用不到該方法, 然后通過 this.$parent.$parent.getList() 就可以調(diào)用到。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue中實(shí)現(xiàn)子組件接收父組件方法并獲取返回值
這篇文章主要介紹了vue中實(shí)現(xiàn)子組件接收父組件方法并獲取返回值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08
Vue+element使用row-class-name修改el-table某一行解決背景色無效的方法
本文主要介紹了Vue+element使用row-class-name修改el-table某一行解決背景色無效的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
Vue3+Ts實(shí)現(xiàn)父子組件間傳值的兩種方式
這篇文章主要給大家介紹了基于Vue3+Ts實(shí)現(xiàn)父子組件間傳值的兩種方式,使用v-model+emit傳值和使用v-bind+emit傳值兩種方式,文章通過代碼示例介紹的非常詳細(xì),感興趣的同學(xué)可以參考閱讀2023-09-09
Vue3響應(yīng)式對(duì)象是如何實(shí)現(xiàn)的(1)
這篇文章主要介紹了Vue3響應(yīng)式對(duì)象是如何實(shí)現(xiàn)的,文章圍繞主題展開詳細(xì)的內(nèi)容介紹具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08
vue或react項(xiàng)目生產(chǎn)環(huán)境去掉console.log的操作
這篇文章主要介紹了vue或react項(xiàng)目生產(chǎn)環(huán)境去掉console.log的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09

