vue中provide?inject的響應式監聽問題怎么解決

這篇文章主要介紹“vue中provide inject的響應式監聽問題怎么解決”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue中provide inject的響應式監聽問題怎么解決”文章能幫助大家解決問題。

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"
    }
    // ...
  }

關于“vue中provide inject的響應式監聽問題怎么解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。