provide inject的響應(yīng)式監(jiān)聽解決

提示：provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的。然而，如果你傳入了一個(gè)可監(jiān)聽的對(duì)象，那么其對(duì)象的屬性還是可響應(yīng)的。

所以傳值傳對(duì)象即可

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

• this._provided.provObj.uuidList = res(異步得到的數(shù)據(jù))
• inject那邊正常獲取

vue監(jiān)聽賦值及provide與inject

vue 當(dāng)父組件 改變 子組件的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 )

參數(shù)：

{string} event

{Function} callback

用法：

監(jiān)聽一個(gè)自定義事件，但是只觸發(fā)一次，在第一次觸發(fā)之后移除監(jiān)聽器。

vm.$off( [event, callback] )

參數(shù)：

• {string | Array<string>} event (只在 2.2.2+ 支持?jǐn)?shù)組)
• {Function} [callback]

用法：

• 移除自定義事件監(jiān)聽器。
• 如果沒有提供參數(shù)，則移除所有的事件監(jiān)聽器；
• 如果只提供了事件，則移除該事件所有的監(jiān)聽器；
• 如果同時(shí)提供了事件與回調(diào)，則只移除這個(gè)回調(diào)的監(jiān)聽器。

vm.$destroy()

用法：

完全銷毀一個(gè)實(shí)例。清理它與其它實(shí)例的連接，解綁它的全部指令及事件監(jiān)聽器。

觸發(fā) beforeDestroy 和 destroyed 的鉤子。

當(dāng)生成vue實(shí)例后，當(dāng)再次給數(shù)據(jù)賦值時(shí)，有時(shí)候并不會(huì)自動(dòng)更新到視圖上去

? obj:{
? ?? ?arr:[]
? }

雙向綁定后無法直接改變obj.arr

需要新增一個(gè)arr賦值或者

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

參數(shù)：

{object | Array} target

{string | number} key

{any} value

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

set方法調(diào)用時(shí)，可以觸發(fā)頁面全部重新渲染。

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

這對(duì)選項(xiàng)需要一起使用，以允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時(shí)間里始終生效。如果你熟悉 React，這與 React 的上下文特性很相似。

provide 選項(xiàng)應(yīng)該是一個(gè)對(duì)象或返回一個(gè)對(duì)象的函數(shù)。該對(duì)象包含可注入其子孫的屬性。在該對(duì)象中你可以使用 ES2015 Symbols 作為 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的環(huán)境下可工作。

inject 選項(xiàng)應(yīng)該是：

一個(gè)字符串?dāng)?shù)組，或一個(gè)對(duì)象，對(duì)象的 key 是本地的綁定名，value 是：

在可用的注入內(nèi)容中搜索用的 key (字符串或 Symbol)，或一個(gè)對(duì)象，該對(duì)象的：

• from 屬性是在可用的注入內(nèi)容中搜索用的 key (字符串或 Symbol)
• default 屬性是降級(jí)情況下使用的 value

提示：provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的。然而，如果你傳入了一個(gè)可監(jiān)聽的對(duì)象，那么其對(duì)象的屬性還是可響應(yīng)的。

示例：

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

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

最新評(píng)論