vue跨组件传参provide/Inject
通常情况下，父组件向孙组件传递数据，可以采用父子props层层传递，也可以使用bus和Vuex直接交互。在Vue2.2.0之后，Vue还提供了provide/inject选项
这对选项允许一个祖先组件向其所有子孙后代组件注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
也就是说，在父组件只要声明了provide，在其子组件，孙组件，曾孙组件等能形成上下游关系的组件中交互，无论多深都能通过inject来访问provider中的数据。而不是局限于只能从当前父组件的prop属性来获取。注意他只做祖先通后代的单向传递的一个办法。有人这么形容：
provide就相当于加强版父组件prop，可以跨越中间组件，inject就相当于加强版子组件的props
# 案例展示
在父组件中provide提供变量
<template>
<div>
<p>{{ title }}</p>
<son></son>
</div>
</template>
<script>
import Son from "./son"
export default {
name: 'Father',
components: { Son },
// provide选项提供变量
provide: {
message: 'provided by father', //也可传入方法editList: this.editList
},
data () {
return {
title: '父组件'
}
},
methods: { ... }
}
</script>
在子组件中，我们故意不使用任何父组件的信息
<template>
<div>
<p>{{ title }}</p>
<grand-son></grand-son>
</div>
</template>
<script>
import grandSon from "./grandSon "
export default {
name: "Son",
components: { grandSon },
data () {
return {
title: '子组件'
}
},
};
</script>
在孙组件中，使用inject来注入
<template>
<div>
<p>message：{{ message }}</p>
</div>
</template>
<script>
export default {
name: "GrandSon",
inject: [ "message" ],
data () {
return {
title: '孙组件'
}
},
methods: { ... }
};
</script>
结果孙组件页面显示：
message: provided by father
//孙子组件接收
inject: {
//传方法
editList: {
type: Function,
default: () => undefined
}
},
