快捷導(dǎo)航

Vue.js中provide/inject實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)更新的方法示例

更新時(shí)間：2019年10月16日 08:26:02 作者：竿牘

這篇文章主要介紹了Vue.js中provide/inject實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)更新，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

vue.js官方文檔：https://cn.vuejs.org/v2/api/#provide-inject

首先假設(shè)我們?cè)谧孑厱r(shí)候傳入進(jìn)來(lái)是個(gè)動(dòng)態(tài)的數(shù)據(jù)，官方不是說(shuō)如果你傳入了一個(gè)可監(jiān)聽(tīng)的對(duì)象，那么其對(duì)象還是可響應(yīng)的么？

parent父頁(yè)面：

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

child子頁(yè)面：

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

結(jié)果:

通過(guò)上面方式，經(jīng)過(guò)驗(yàn)證，子組件頁(yè)面都沒(méi)辦法實(shí)現(xiàn)響應(yīng)更新this.foo的值。可能我們對(duì)官方理解還是有誤，下面通過(guò)網(wǎng)上資料和自己構(gòu)思實(shí)現(xiàn)了響應(yīng)式數(shù)據(jù)更新

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

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

parent父頁(yè)面：

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

  },

 }

child子頁(yè)面：

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);
   }
 }

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

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

Parent組件：

<template>
  <div class="parent-container">
   Parent組件
   <br/>
   <button type="button" @click="changeName">改變name</button>
   <br/>
   Parent組件中 name的值: {{name}}
   <Child v-bind="{name: 'k3vvvv'}" />
  </div>
</template>

<style scoped>
 .parent-container {
  padding: 30px;
  border: 1px solid burlywood;
 }
</style>

<script>
import Child from './Child'
export default {
 name: 'Parent',
 data () {
  return {
   name: 'Kevin'
  }
 },
 methods: {
  changeName (val) {
   this.name = 'Kev'
  }
 },
 provide: function () {
  return {
   nameFromParent: this.name,
   getReaciveNameFromParent: () => this.name
  }
 },
 // provide: {
 // nameFromParent: this.name,
 // getReaciveNameFromParent: () => this.name
 // },
 components: {
  Child
 }
}
</script>

Child組件

<template>
 <div class="child-container">
  Child組件
  <br/>
  <GrandSon />
 </div>
</template>
<style scoped>
 .child-container {
  padding: 30px;
  border: 1px solid burlywood;
 }
</style>
<script>
import GrandSon from './GrandSon'
export default {
 components: {
  GrandSon
 }
}
</script>

GrandSon組件：

<template>
 <div class="grandson-container">
  Grandson組件
  <br/>
  {{nameFromParent}}
  <br/>
  {{reactiveNameFromParent}}
 </div>
</template>
<style scoped>
 .grandson-container {
  padding: 30px;
  border: 1px solid burlywood;
 }
</style>
<script>
export default {
 inject: ['nameFromParent', 'getReaciveNameFromParent'],
 computed: {
  reactiveNameFromParent () {
   return this.getReaciveNameFromParent()
  }
 },
 watch: {
  'reactiveNameFromParent': function (val) {
   console.log('來(lái)自Parent組件的name值發(fā)生了變化', val)
  }
 },
 mounted () {
  console.log(this.nameFromParent, 'nameFromParent')
 }
}
</script>

結(jié)果:

來(lái)自于reactiveNameFromParent ，隨著祖先組件變化而變化了

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: