日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

這篇文章主要介紹了Vue.js中provide/inject如何實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)更新，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

專注于為中小企業(yè)提供做網(wǎng)站、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)下冶免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

首先假設(shè)我們在祖輩時(shí)候傳入進(jìn)來是個(gè)動態(tài)的數(shù)據(jù)，官方不是說如果你傳入了一個(gè)可監(jiān)聽的對象，那么其對象還是可響應(yīng)的么？

parent父頁面：

export default {
 provide() {
  return  { foo: this.fonnB }
 },
 data(){
  return { fonnB: 'old word '} 
 }
created() {
  setTimeout(()=>{
   this.fonnB = 'new words';  // 這里僅僅foonB變化了，foo沒有變化
   this._provided.foo="new words"; // 這里foo變化了，但子組件獲得的foo 依舊是old words
   console.log( this._provided);
  },1000)
 },
}

child子頁面：

export default {
 inject:['foo'],
 data(){
  return { chilrfoo: this.foo } 
 },
 created() {
  setTimeout(()=>{
   // 子組件獲得的foo 依舊是old words
   console.log( this.foo)
  },2000)
 }
}

結(jié)果:

通過上面方式，經(jīng)過驗(yàn)證，子組件頁面都沒辦法實(shí)現(xiàn)響應(yīng)更新this.foo的值?？赡芪覀儗俜嚼斫膺€是有誤，下面通過網(wǎng)上資料和自己構(gòu)思實(shí)現(xiàn)了響應(yīng)式數(shù)據(jù)更新

示例（結(jié)果仍不可行）

很明顯上面再父組件定時(shí)器內(nèi)我們是改變了數(shù)據(jù)源，這個(gè)時(shí)候我們就在想，我們改變的數(shù)據(jù)到底有沒有傳入到子孫組件中，那么要驗(yàn)證這個(gè)問題，我們不妨可以在子孫組件中手動寫set 函數(shù)，computed 本身就只相當(dāng)于一個(gè)get函數(shù)，當(dāng)然，你也可以試試watch

parent父頁面：

export default {
provide() {
   return  { foo: this.fonnB }
  },
  data(){
   return {
    fonnB: 'old word'
   } 
  }
   created() {
   setTimeout(()=>{
    this.fonnB = "new words";  
    // 這里foo變化了，但子組件獲得的foo 依舊是old words
   },1000)

  },

 }

child子頁面：

export default {
  inject:['foo'],
  data(){
   return {
    childfooOld: this.foo
   } 
  },
  computed:{
    chilrdfoo() {
      return this.foo
    }
  },
 created () {
    console.log(this.foo)
    // -> 'old word'
    setTimeout(() => {
      console.log(this.chilrdfoo); // 這里計(jì)算屬性依舊是old words
    }, 2000);
   }
 }

通過computed，我們都知道data中有g(shù)et/set，數(shù)據(jù)也是響應(yīng)式的，但為什么沒更新，有點(diǎn)疑惑，如果有大佬知道能解釋清楚的可以探討。

但是，但是，但是！實(shí)際需求肯定沒有這么簡單，往往我們需要的是共享父組件里面的動態(tài)數(shù)據(jù)，這些數(shù)據(jù)可能來自于data 或者 store。 就是說父組件里面的數(shù)據(jù)發(fā)生變化之后，需要同步到子孫組件里面。這時(shí)候該怎么做呢？
我想的是將一個(gè)函數(shù)賦值給provide的一個(gè)值，這個(gè)函數(shù)返回父組件的動態(tài)數(shù)據(jù)，然后在子孫組件里面調(diào)用這個(gè)函數(shù)。
實(shí)際上這個(gè)函數(shù)存儲了父組件實(shí)例的引用，所以每次子組件都能獲取到最新的數(shù)據(jù)。代碼長下面的樣子：

Parent組件：

 .parent-container {
  padding: 30px;
  border: 1px solid burlywood;
 }

Child組件

 .child-container {
  padding: 30px;
  border: 1px solid burlywood;
 }

GrandSon組件：

 .grandson-container {
  padding: 30px;
  border: 1px solid burlywood;
 }

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Vue.js中provide/inject如何實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)更新”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

名稱欄目：Vue.js中provide/inject如何實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)更新
文章源于：http://www.dlmjj.cn/article/ghccgo.html