vue中provide inject的響應式監聽解決方案

2022-04-18 22:02:17

provide inject的響應式監聽解決

提示：provide 和 inject 繫結並不是可響應的。這是刻意為之的。然而，如果你傳入了一個可監聽的物件，那麼其物件的屬性還是可響應的。

所以傳值傳物件即可

provide(){
    return {
      provObj: {
        uuidList:{}
      }
    }
  },

this._provided.provObj.uuidList = res(非同步得到的資料)
inject那邊正常獲取

vue監聽賦值及provide與inject

vue 當父元件改變子元件的props 卻不變

  watch: {
    'oState': function (val,oldval) {
      this.getOrderList({orderStatus: this.getOrderState(this.oState), pageSize: 1})
    },
  // 深度 watcher
      c: {
        handler: function (val, oldVal) { /* ... */ },
        deep: true
      },
  },

$refs

  <ul class="comment-list" v-if="list" ref="commentList"></ul>
  scrollToTop () {
    this.$refs.commentList.scrollTop = 0
  }

$el

  this.$refs.studentListDialog.$el.querySelector('.el-dialog')
  vm.$once( event, callback )

引數：

{string} event

{Function} callback

用法：

監聽一個自定義事件，但是隻觸發一次，在第一次觸發之後移除監聽器。

vm.$off( [event, callback] )

引數：

{string | Array<string>} event (只在 2.2.2+ 支援陣列)
{Function} [callback]

用法：

移除自定義事件監聽器。
如果沒有提供引數，則移除所有的事件監聽器；
如果只提供了事件，則移除該事件所有的監聽器；
如果同時提供了事件與回撥，則只移除這個回撥的監聽器。

vm.$destroy()

用法：

完全銷燬一個範例。清理它與其它範例的連線，解綁它的全部指令及事件監聽器。

觸發 beforeDestroy 和 destroyed 的勾點。

當生成vue範例後，當再次給資料賦值時，有時候並不會自動更新到檢視上去

  obj:{
      arr:[]
  }

雙向繫結後無法直接改變obj.arr

需要新增一個arr賦值或者

  this.$set(this.ruleForm, 'date', time)
  vue.set(target,key,value)

引數：

{object | Array} target

{string | number} key

{any} value

this.$set()和Vue.set()本質方法一樣，前者可以用在methods中使用。

set方法呼叫時，可以觸發頁面全部重新渲染。

provide：Object | () => Objectinject：Array<string> | { [key: string]: string | Symbol | Object }

這對選項需要一起使用，以允許一個祖先元件向其所有子孫後代注入一個依賴，不論元件層次有多深，並在起上下游關係成立的時間裡始終生效。如果你熟悉 React，這與 React 的上下文特性很相似。

provide 選項應該是一個物件或返回一個物件的函數。該物件包含可注入其子孫的屬性。在該物件中你可以使用 ES2015 Symbols 作為 key，但是隻在原生支援 Symbol 和 Reflect.ownKeys 的環境下可工作。

inject 選項應該是：

一個字串陣列，或一個物件，物件的 key 是原生的繫結名，value 是：

在可用的注入內容中搜尋用的 key (字串或 Symbol)，或一個物件，該物件的：

from 屬性是在可用的注入內容中搜尋用的 key (字串或 Symbol)
default 屬性是降級情況下使用的 value

提示：provide 和 inject 繫結並不是可響應的。這是刻意為之的。然而，如果你傳入了一個可監聽的物件，那麼其物件的屬性還是可響應的。

範例：

// 父級元件提供 ‘foo'
  var Provider = {
    provide: {
      foo: 'bar'
    },
    // ...
  }
// 子元件注入 'foo'
  var Child = {
    inject: ['foo'],
    created () {
      console.log(this.foo) // => "bar"
    }
    // ...
  }

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。

vue中provide inject的響應式監聽解決方案

目錄

provide inject的響應式監聽解決

vue監聽賦值及provide與inject

熱門文章