provide/inject

weixin_45283339發表於2020-12-21

vue中使用provide/inject進行資料傳遞

provide 和 inject 主要在開發高階外掛/元件庫時使用。並不推薦用於普通應用程式程式碼中;
這對選項需要一起使用,以允許一個祖先元件向其所有子孫後代注入一個依賴,不論元件層次有多深,並在其上下游關係成立的時間裡始終生效。

provide 選項應該是一個物件或返回一個物件的函式
在父元件中與data函式同級

   provide(){
       return {
            provideData:this.provideData, 
            value:this.value
			//或者函式。。
        }
     }

inject 選項應該是:一個字串陣列,或一個物件
子孫元件中與data函式同級

inject:['provideData','value'],
created(){
    console.log(this.provideData)
},

provide 和 inject 繫結並不是可響應的,如果你傳入了一個可監聽的物件,那麼其物件的 property 還是可響應的。

比如有個el-input事件 實時改變provide物件的value

 inputChange(e){
      this.provideData.value=e
      console.log(e)
  }

相關文章