這篇文章主要介紹了vue中provide / inject的作用，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

專業(yè)領(lǐng)域包括網(wǎng)站制作、成都網(wǎng)站設(shè)計、電子商務(wù)商城網(wǎng)站建設(shè)、微信營銷、系統(tǒng)平臺開發(fā)， 與其他網(wǎng)站設(shè)計及系統(tǒng)開發(fā)公司不同，成都創(chuàng)新互聯(lián)公司的整合解決方案結(jié)合了幫做網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗和互聯(lián)網(wǎng)整合營銷的理念，并將策略和執(zhí)行緊密結(jié)合，為客戶提供全網(wǎng)互聯(lián)網(wǎng)整合方案。

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

1.前言

vue的父子組件通信用什么？

：prop和$emit的組合。

如果是爺孫組件呢？

：那么就要用父組件來轉(zhuǎn)發(fā)數(shù)據(jù)和事件了。

如果是太爺爺和孫子組件呢？

：當然是vuex啦

emmm 好的，沒我啥事了，我這就走。

不行，我還能再掙扎一會兒！肯定有一部分兄弟做的項目比較小，組件通信的情況不是很多，懶得引入vuex，那么provide/inject就是爺孫（不限于爺孫/父子，中間隔了多少級都可以）通信問題的最好解決方案啦！

2.官方文檔抄過來的介紹

這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時間里始終生效。

provide 選項應(yīng)該是

• 一個對象或返回一個對象的函數(shù)。該對象包含可注入其子孫的屬性。在該對象中你可以使用 ES2015 Symbols 作為 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的環(huán)境下可工作。

inject 選項應(yīng)該是：

• 一個字符串數(shù)組，或

• 一個對象(詳情點擊 這里 )

3.基本用法

// 祖先組件 提供foo
//第一種
export default {
 name: "grandfather",
 provide(){
  return{
   foo:'halo'
  }
 },
}
//第二種
export default {
 name: "grandfather",
 provide:{
  foo:'halo~~~~'
 },
}
//后代組件 注入foo
export default {
 inject:['foo'],
}

上面的兩種用法有什么區(qū)別嗎？

• 如果你只是傳一個字符串，像上面的‘halo'，那么是沒有區(qū)別的，后代都能讀到。

• 如果你需要傳一個對象（如下所示代碼），那么第二種是傳不了的，后代組件拿不到數(shù)據(jù)。所以建議只寫第一種

//當你傳遞對象給后代時
provide(){
  return{
   test:this.msg
  }
 },

注意： 一旦注入了某個數(shù)據(jù)，比如上面示例中的 foo，那這個組件中就不能再聲明 foo 這個數(shù)據(jù)了，因為它已經(jīng)被父級占有。

4.什么時候才是可響應(yīng)的？

如果你使用過vuex，那么你會認為，上面的例子中，如果我把 foo:'halo' 改成 foo:'world' ,子組件會及時響應(yīng)數(shù)據(jù)變更，視圖完成更新。

可惜，沒有

在vue官方文檔中有這么一句話

提示： provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的。然而，如果你傳入了一個可監(jiān)聽的對象，那么其對象的屬性還是可響應(yīng)的。

這里不探討vue為什么要這么設(shè)計，我這里只展示啥時候provide/inject可響應(yīng)

provide(){
 return{
  test:this.msg
 }
},
data() {
 return {
  msg: "Welcome to Your Vue.js App",
 }
}
mounted(){
 setTimeout(()=>{
  this.msg = "halo world";
  console.log(this._provided.msg)
  //log：Welcome to Your Vue.js App
 },3000)
},

如上所示，這樣做是不行的，打印出來的 provided 中的數(shù)據(jù)并沒有改，子組件取得值也沒變。

你甚至可以直接給 this._provided.msg 賦值，但是 即使 是 _provided.msg 里面的值改變了，子組件的取值，依然沒有變。

當你像下面這樣做的時候，就可以響應(yīng)了

provide(){
 return{
  test:this.activeData
 }
},
data() {
 return {
  activeData:{name:'halo'},
 }
}
mounted(){
 setTimeout(()=>{
  this.activeData.name = 'world';
 },3000)
}

這就是vue中寫道的 對象的屬性 是可以響應(yīng)的

然而，如果你傳入了一個可監(jiān)聽的對象，那么其對象的屬性還是可響應(yīng)的。

5.實現(xiàn)全局變量

全局變量？provide/inject不是只能從祖先傳遞給后代嗎？沒錯，我們只要綁定到最最頂層的組件即可。

就是你啦！ app.vue

我們把一整個實例都扔給后代！

//app.vue
export default {
 name: 'App',
 provide(){
  return{
   app:this
  }
 },
 data(){
  return{
   text:"it's hard to tell the night time from the day"
  }
 },
 methods:{
  say(){
   console.log("Desperado, why don't you come to your senses?")
  }
 }
}
//其他所有子組件，需要全局變量的，只需要按需注入app即可
export default {
 inject:['foo','app'],
 mounted(){
  console.log(this.app.text);//獲取app中的變量
  this.app.say();//可以執(zhí)行app中的方法，變身為全局方法！
 }
}

這個也是可響應(yīng)的噢~

6.實現(xiàn)頁面刷新

1 . 用vue-router重新路由到當前頁面，頁面是不進行刷新的

2 . 采用window.reload()，或者router.go(0)刷新時，整個瀏覽器進行了重新加載，閃爍，體驗不好

那我們怎么做呢？

跟上面的原理差不多，我們只在控制路由的組件中寫一個函數(shù)（使用 v-if 控制 router-view 的顯示隱藏,這里的原理不作贅述），然后把這個函數(shù)傳遞給后代，然后在后代組件中調(diào)用這個方法即可刷新路由啦。

//app.vue
<router-view v-if="isShowRouter"/>
export default {
 name: 'App',
 provide(){
  return{
   reload:this.reload
  }
 },
 data(){
  return{
   isShowRouter:true,
  }
 },
 methods:{
  reload(){
   this.isShowRouter = false;
   this.$nextTick(()=>{
    this.isShowRouter = true;
   })
  }
 }
}
//后代組件
export default {
 inject:['reload'], 
}

7.結(jié)尾

vue中有這樣的提示

注意: provide 和 inject 主要為高階插件/組件庫提供用例。并不推薦直接用于應(yīng)用程序代碼中。

provide/inject平時用的比較少，多數(shù)用于開發(fā)組件，但某些情況下還是很好用的。

業(yè)務(wù)龐大而復(fù)雜的，還是建議使用 vuex ~

感謝你能夠認真閱讀完這篇文章，希望小編分享的“vue中provide / inject的作用”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

新聞名稱：vue中provide/inject的作用-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://www.chinadenli.net/article26/gsicg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、網(wǎng)站導(dǎo)航、做網(wǎng)站、域名注冊、Google、標簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)