provide：提供依赖,是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。
inject： 注入依赖一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。
使用场景：
由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据
使用方式
在最外层组件中
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: "App",
provide() {
return {
appOption:this,
reload: this.reload,
isRouterShow:this.isRouterShow
};
},
data() {
return {
isRouterShow: true
};
},
methods: {
reload(){
console.log("我是方法reload")
}
},
created () {}
};
</script>
<style lang="scss">
</style>
在孙组件中
<template>
<div id="app1">
{{ isRouterShow }}-----{{appOption.isRouterShow}}
</div>
</template>
<script>
export default {
name: "App1",
inject:['appOption','reload','isRouterShow'],
data() {
return {
};
},
methods: {
},
mounted() {
this.reload()
},
};
</script>
<style lang="scss">
</style>
