1.在寫項(xiàng)目的時(shí)候，由于組件封裝的層次超過(guò)了兩層，因而想起了用provide和inject傳值的方式。provide和inject都是與data、methods、鉤子函數(shù)同級(jí),千萬(wàn)不要寫錯(cuò)！！

基礎(chǔ)用法如下：

父組件中：

provide() {return {parent: this.parent,}},

孫組件中：

provide應(yīng)該是 一個(gè)對(duì)象或返回一個(gè)對(duì)象的函數(shù)。 該對(duì)象包含可注入其子孫的屬性。

---------------------------------------------------------------------------------------------------------------------------------

項(xiàng)目中實(shí)際運(yùn)用到的地方：

父組件中發(fā)起請(qǐng)求，從后端獲取到數(shù)據(jù)，將獲取到的數(shù)據(jù)傳遞到孫組件中，父組件獲取到數(shù)據(jù)賦值給變量

1.開(kāi)始寫法如下：

父組件中：

?

?孫組件中：

?孫組件中打開(kāi)調(diào)試工具，我們可以發(fā)現(xiàn)inject和data中定義的變量都是一個(gè)空數(shù)組，究其原因，就是因?yàn)楦附M件中是異步獲取到數(shù)據(jù)，當(dāng)數(shù)據(jù)還沒(méi)有獲取到的時(shí)候，就已經(jīng)通過(guò)provide傳遞到孫組件中，所以此時(shí)，我們需要將父組件中獲取到的數(shù)據(jù)進(jìn)行包裝，再傳遞到孫組件中

2.經(jīng)過(guò)包裝之后

?父組件中：

父組件異步獲取到數(shù)據(jù)，將數(shù)據(jù)進(jìn)行簡(jiǎn)單的處理。如下：

?

?孫組件中：

此時(shí)在孫組件中，我們可以看到調(diào)試工具中，provide和inject接受到的是一個(gè)函數(shù)

?使用的時(shí)候，直接調(diào)用整個(gè)函數(shù)即可拿到想要的數(shù)據(jù)

總結(jié)

以上是生活随笔為你收集整理的关于组件之间使用provide和inject传值的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。