provide/inject实现祖先组件向其他子孙组件注入一个值
实例 祖先组件
<template>
<div id="app">
<!--通过v-if显隐控制路由重新渲染页面实现刷新-->
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'App',
//向组件外暴露一个
provide() {
return {
//暴露名称 绑定的本组件属性
reload: this.reload
};
},
data() {
return {
//变量
isRouterAlive: true
};
},
methods: {
//调用reload方法控制是否渲染
reload() {
//变量赋值
this.isRouterAlive = false;
//;值的改变使DOM重新渲染,this.$nextTick(callback)
this.$nextTick(function() {
this.isRouterAlive = true;
});
}
}
};
</script>
this.$nextTick(callback);
官方解释：将回调延迟到下次 DOM 更新循环之后执行在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
个人理解:当数据或是其他因素变化引起的Dom更新时,直接读取和使用DOM的参与变化的值,可能得到的是更新前的,DOM没有更新完成;将要执行的代码放在this.$nextTick(callback)的callback中,会使其在DOM更新后执行,确保是新数据;
例: this.$nextTick(function() {
this.isRouterAlive = true;
});
子孙组件
export default {
name: 'pickList',
//在default下 与 data/watch/computed等同级位置注入,注入的字符串名字要与上面暴露的一致
//然后在此组件的其他位置就可以调用了 this.reload();
inject: ['reload'],
computed: {
getCancelId() {
}
},
watch: {
getCancelId(value) {
}
},
data() {
return {
}
}
官方建议:provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。 2.2.0 新增
这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效
provide：Object 或 () => Object 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性
inject：Array<string> 或 { [key: string]: string | Symbol | Object } 这是去看vue.js官网吧一时写不明白,简单用自己理解的说下,应该是一个String类型的数组,或者是一个对象,当是数组时比较好理解直接是provide中暴露的属性名的字符传数组["a"],当是对象时 key是与本地绑定的值,值是字符串,或Symbol或是一个对象,当是字符串时与provide暴露的一致,当是Symbol时与provide暴露的Symbol一致;当是对象时,对象的两个key分别是 from 和default ,对应的值是provide暴露的(注入的内容) 字符串或 Symbol; 说不明白,以后加示例吧.
浪客行1213的简书
