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