provide/inject實現(xiàn)祖先組件向其他子孫組件注入一個值
實例 祖先組件
<template>
<div id="app">
<!--通過v-if顯隱控制路由重新渲染頁面實現(xiàn)刷新-->
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'App',
//向組件外暴露一個
provide() {
return {
//暴露名稱 綁定的本組件屬性
reload: this.reload
};
},
data() {
return {
//變量
isRouterAlive: true
};
},
methods: {
//調(diào)用reload方法控制是否渲染
reload() {
//變量賦值
this.isRouterAlive = false;
//;值的改變使DOM重新渲染,this.$nextTick(callback)
this.$nextTick(function() {
this.isRouterAlive = true;
});
}
}
};
</script>
this.$nextTick(callback);
官方解釋：將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行在修改數(shù)據(jù)之后立即使用它，然后等待 DOM 更新叹谁。它跟全局方法 Vue.nextTick 一樣，不同的是回調(diào)的 this 自動綁定到調(diào)用它的實例上。
個人理解:當數(shù)據(jù)或是其他因素變化引起的Dom更新時,直接讀取和使用DOM的參與變化的值,可能得到的是更新前的,DOM沒有更新完成;將要執(zhí)行的代碼放在this.$nextTick(callback)的callback中,會使其在DOM更新后執(zhí)行,確保是新數(shù)據(jù);
例: this.$nextTick(function() {
this.isRouterAlive = true;
});
子孫組件
export default {
name: 'pickList',
//在default下 與 data/watch/computed等同級位置注入,注入的字符串名字要與上面暴露的一致
//然后在此組件的其他位置就可以調(diào)用了 this.reload();
inject: ['reload'],
computed: {
getCancelId() {
}
},
watch: {
getCancelId(value) {
}
},
data() {
return {
}
}
官方建議:provide 和 inject 主要為高階插件/組件庫提供用例。并不推薦直接用于應用程序代碼中。 2.2.0 新增
這對選項需要一起使用懊亡，以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深乎串，并在起上下游關系成立的時間里始終生效
provide：Object 或 () => Object 選項應該是一個對象或返回一個對象的函數(shù)店枣。該對象包含可注入其子孫的屬性
inject：Array<string> 或 { [key: string]: string | Symbol | Object } 這是去看vue.js官網(wǎng)吧一時寫不明白,簡單用自己理解的說下,應該是一個String類型的數(shù)組,或者是一個對象,當是數(shù)組時比較好理解直接是provide中暴露的屬性名的字符傳數(shù)組["a"],當是對象時 key是與本地綁定的值,值是字符串,或Symbol或是一個對象,當是字符串時與provide暴露的一致,當是Symbol時與provide暴露的Symbol一致;當是對象時,對象的兩個key分別是 from 和default ,對應的值是provide暴露的(注入的內(nèi)容) 字符串或 Symbol; 說不明白,以后加示例吧.
浪客行1213的簡書
