前言
为什么我要写这么一篇文章，网上不是一堆关于provide/inject的技术文章吗？ 原因在于网上的那些博客大牛文章能完美避开坑，而我这篇文章描述是挖坑和埋坑的一个过程
provide/inject是什么
依赖注入，官网的描述并不能阻止我不写这个文章，原因很简单，官网只是老菜鸟的随手备忘录，小菜鸟还需要成长磨砺，它不能解决我一些问题。
何时使用
父子组件交互方式多种，props、vuex、
我这里为什么要使用它？ 我一个知识库详情父组件中包含了大量的子组件，每个子组件都需要父组件的知识库ID,这时候我不想写大量props，就用到provide/inject进行传值了
响应式传值最终版
急躁的改写这个代码结构就可以完成provide/inject响应传值
data() { return {
knowledge: {
knowledgeId: ''
}
}
},
provide() { return { // 直接传对象
kData: this.knowledge
}
},
created() { // 变更data属性knowledge下的knowledgeId元素值
this.knowledge.knowledgeId = 2
}子组件使用
inject: ['kData'],
mounted() {
console.error('yc:' + this.kData.knowledgeId)
}坑在哪
坑在于provide，子组件inject没什么难度
第一版尝试
下面代码并不能在子组件获取这个kId的值，但网上有provide: {}这样定义的写法，他们之所以能够成功是kId: 'xxx'后面定义的是一个静态的字符串而不是动态的获取data中的knowledgeId属性
data() { return {
knowledgeId: 1
}
},
provide: {
kId: this.knowledgeId
}第二版尝试
上面第一版的问题很好解决，网上有另外一种写法就是通过provide函数返回一个对象，这种是可以获取到data中的属性内容
data() { return {
knowledgeId: 1
}
},
provide() { return {
kId: this.knowledgeId
}
}第三版尝试
第二版看起来没问题，但是如果我要在某个地方改变这个data中的knowledgeId属性，子组件是获取不到的，怎么解决？ https://www.jianshu.com/p/ae0...，这篇文章提到了：
提示：provide 和 inject
绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
虽然上面讲到了本质，老菜鸟都明白，小菜鸟茫然不解，所以它不能阻止我不写下这篇文章，原因在于它没有说起这个可监听对象是怎么个回事。传入的对象是指provide中的对象还是data的对象？第三版改写成在provide传入对象
data() { return {
knowledgeId: ''
}
},
provide() { return {
pData: {
kId: this.knowledgeId
}
}
},
mounted() { // 更改data中的knowledgeId的值
this.knowledgeId = 2
}第四版尝试
第三版的写法在子组件中是无法获取变更后的knowledgeId的内容，那么就在data中包装一个对象，但是还是不行，第五版改写马上开始
data() { return {
knowledge: {
knowledgeId: ''
}
}
},
provide() { return {
kId: this.knowledge.knowledgeId
}
},
mounted() { this.knowledge.knowledgeId = 2
}第五版尝试
很高兴的说，这版就是终结版，它可以在子组件获取到knowledgeId了，原理是什么？ 谁在乎呢，用别人的工具，用的开心就好
data() { return {
knowledge: {
knowledgeId: ''
}
}
},
provide() { return { // 直接传对象
kData: this.knowledge
}
},
mounted() { this.knowledge.knowledgeId = 2
}存在的小问题
正如文章：https://www.jianshu.com/p/ae0... 第三点提到的，执行顺序的问题，上面在mounted中处理provide的数据有时会导致子组件获取到的是父属性knowledge.knowledgeId的默认属性''，所以把provide数据生成的处理逻辑放到created里面就可以避免这个问题的发生
题外话
上面变更knowledgId采用了从路由获取参数，但刷新页面导致参数丢失，这是因为路由是：
path: 'detail'而不是path: 'detail/:knowledgeId'，虽然前者通过
this.$router.push({ name: 'knowledgeDetail', params: { knowledgeId: knowledgeId } }) 也能传，但刷新就参数丢失了，同时webstorm更改后时不时抽筋不立即更新页面，只能手动删除html样式来告诉IDE更新，这些无疑加大了对provide/inject刚才是出问题的排查难度，索性写下这篇文章指引那些用别人工具还用这么辛苦，写尼玛代码的人找到出路
mounted() {
this.knowledge.knowledgeId = this.$route.params.knowledgeId
}