vue中使provide中的數據變為響應式


正常使用provide的方式:

父組件中:

provide:{

  for:'demo'

}

這樣子組件中無論多深的子組件都可以使用:
inject:['for'],

data(){

  return{

    demo:this.for

  }

}

但是上面的寫法有一定的問題,比如父組件中for變量的值如果我們是在mounted方法中請求后台數據再更改provide中for的值,那么在子組件中獲取不到更改后的for的值。

這時候就需要換一種寫法:

父組件中:

  provide() {
    return {
      provObj: {
        for: '',
      },
    };
  },
 mounted() {
  
 setTimeout(()=>{
      this._provided.provObj.for= 'demo';
    },2000);
}
子組件中:

inject:['provObj'],

data(){

  return{

    demo:this.provObj.for

  }

}

這樣就可以獲取到在mounted中才給provide賦上的值。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM