Vue中的provide/inject机制
定义说明：这对选项是一起使用的。以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
通俗的说就是：组件得引入层次过多，我们的子孙组件想要获取祖先组件得资源，那么怎么办呢，总不能一直取父级往上吧，而且这样代码结构容易混乱。这个就是这对选项要干的事情。
provide：是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。
inject：一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。
主要看一下响应式数据、非响应式数据的区别 ：
<!DOCTYPE html>
<html lang="zh">
<body>
<div id="app">
<h1>
{{PROJECT_NAME}}
<br />
{{appName}}
<br />
{{appVersson}}
</h1>
<parent />
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
<script>
const child = {
inject: ['appName', 'PROJECT_NAME'],
template: `<div style="color:red;">
{{PROJECT_NAME}}
<br />
{{appName}} 【在parent组件,修改了分发内容】
</div>`,
};
const parent = {
inject: ['appName', 'appVersson', 'PROJECT_NAME'],
// 更改分发内容
provide() {
return {
appName: this.appName + '-from-parent',
};
},
components: {
child,
},
template: `<div style="color:blue;">
{{PROJECT_NAME}}
<br />
{{appName}}
<br />
{{appVersson}} 【不是响应式的，上级传递的computed】
<br/>
<br/>
<child/>
</div>`,
};
const PROJECT_NAME = '哇哈哈的项目';
const app = new Vue({
el: '#app',
components: {
parent,
},
provide() {
console.log(this);
return {
// 普通数据(无响应式)
PROJECT_NAME2: PROJECT_NAME,
PROJECT_NAME: this.PROJECT_NAME,
// 响应式数据
appName: this.appName, // 使用data中的数据
appVersson: this.appVersson, // 使用computed中的数据，可以倒是可以，但不是响应式的。。
};
},
data() {
this.PROJECT_NAME = PROJECT_NAME;
return {
appName: 'app',
now: Date.now(),
};
},
computed: {
appVersson() {
return this.now;
},
},
created() {
setInterval(() => this.now = Date.now(), 1000);
},
});
</script>
</html>本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
