Vue的provide/inject选项

一、概念解析

成对出现： 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>
  `
})