一、概念解析
成对出现: provide和inject是成对出现的
作用:用于父组件向子孙组件传递数据
使用方法: provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。
使用场景:由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据
二、代码解析
// 孙组件const SunChildComponent = { template: '<div>child component</div>', //跨级使用了父组件的数据 inject: ['yeye'], mounted () { console.log(this.yeye) }}---------------------------------------------------------------------------------------------// 子组件const ChildComponent = { name: 'comp', components: { SunChildComponent }, template: ` <div :style = "style"> <slot :value = "value" :aaa = "aaa"></slot> <sun-child-component></sun-child-component> </div> `, data () { return { value: 'component val', aaa: 'component aaa' } }}---------------------------------------------------------------------------------------------// 父组件new Vue({ components: { CompOne: ChildComponent }, //父组件通过provide将自己的数据以对象形式传出去 provide () { return { yeye: this value: this.value } }, el: '#root', data () { return { value: '本组件的123' } }, mounted () { console.log(this.$refs.comp.value) console.log(this.$refs.span) }, template: ` <div> <comp-one ref = "comp"> <span slot-scope = "props" ref="span">{{props.value}} {{props.aaa}} {{value}}</span> </comp-one> </div> `})