Vue使用provide各種傳值后inject獲取undefined的問題及解決
使用provide各種傳值后inject獲取undefined
首先使用provide是為了方便孫子組件獲取爺爺組件的數(shù)據(jù)
就比如下方想使用provide把table的refs分派給每個(gè)孫子組件
但是provide是先于mounted執(zhí)行的，導(dǎo)致dom還沒有搭建完成就發(fā)送給了子組件，所以子組件inject后值為undefined
所以我想要不給一個(gè)響應(yīng)式數(shù)據(jù)，這樣在爺爺組件中的mounted對(duì)其進(jìn)行賦值后孫子組件也能同步更新
這樣子組件就能正常獲取它的值了
不知道還有沒有更好的解決方法，如果有請(qǐng)?zhí)呶乙幌? o(￣▽￣)ブ
不如直接讓爺爺組件傳this
但是傳遞this后為undefined怎么辦？
原來的寫法：
provide: {
$examRouter: this,
},得改成函數(shù)的寫法就好了:
provide() {
return {
$examRouter: this,
}
},inject接收不到provide中的值
一、question？？？
1. provide傳值
這個(gè) layoutModel 在data中默認(rèn)值是1，然后通過接口請(qǐng)求，改變它的值
2. inject接收值
此時(shí)父組件的值為3，但是inject接收到的值為1
二、Why
因?yàn)槭墙涌谡?qǐng)求更新數(shù)據(jù)，但provide在初始的時(shí)候就傳了一個(gè)固定的初始值下去，所以下級(jí)組件接收到的是初始值，而不是更新后的值
三、Answer
在data定義的時(shí)候采用對(duì)象的形式，這樣就是傳一個(gè)地址過去 而不是一個(gè)固定的值
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了搭建vue開發(fā)環(huán)境的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
Vue如何實(shí)現(xiàn)變量表達(dá)式選擇器
這篇文章主要介紹了Vue如何實(shí)現(xiàn)變量表達(dá)式選擇器，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-02-02
這篇文章主要為大家詳細(xì)介紹了Vue3中邏輯復(fù)用的相關(guān)知識(shí),文中的示例代碼簡(jiǎn)潔易懂,對(duì)我們深入了解Vue3有一定的幫助,需要的小伙伴可以參考下2023-12-12
vue項(xiàng)目如何讀取本地json文件數(shù)據(jù)實(shí)例
很多時(shí)候我們需要從本地讀取JSON文件里面的內(nèi)容,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目如何讀取本地json文件數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue 的雙向綁定原理與用法,結(jié)合實(shí)例形式總結(jié)分析了Vue 的雙向綁定基本原理、功能、用法及注意事項(xiàng),需要的朋友可以參考下2020-05-05
在Vuex使用dispatch和commit來調(diào)用mutations的區(qū)別詳解
今天小編就為大家分享一篇在Vuex使用dispatch和commit來調(diào)用mutations的區(qū)別詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue使用webPack打包發(fā)布后頁(yè)面顯示空白的解決
這篇文章主要介紹了vue使用webPack打包發(fā)布后頁(yè)面顯示空白的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue如何解決循環(huán)引用組件報(bào)錯(cuò)的問題
這篇文章主要介紹了vue如何解決循環(huán)引用組件報(bào)錯(cuò)的問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
Element-UI表格嵌入popover遇到的問題及解決方案
在表格中我們通常需要在每一行的一些單元格中顯示popover,這篇文章主要給大家介紹了關(guān)于Element-UI表格嵌入popover遇到的問題及解決方案,需要的朋友可以參考下2023-11-11
Vue實(shí)現(xiàn)todo應(yīng)用的示例
這篇文章主要介紹了Vue實(shí)現(xiàn)todo應(yīng)用的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-02-02