provide和inject的使用

当组件嵌套层级过多时,子组件调用父组件的方法很麻烦,如parents组件引入组件A,组件A引入组件B,组件B引入组件C,组件C中想调用组件parents中的方法时,可以使用vue提供的provide和inject

父组件parents.vue

<template>
   <div>
       <childrenA></childrenA>
   </div>
</template>

<script>
import childrenA from './childrenA'
export default {
  provide () {
    return {
      parent: this.parent // 父组件方法
    }
  },
  methods: {
    parent () {
      console.log('组件C注入')
    }
  },
  components: {
    childrenA
  }
}
</script>

子组件A childrenA.vue

<template>
   <div>子组件A
       <childrenB></childrenB>
   </div>
</template>

<script>
import childrenB from './childrenB'
export default {
  components: {
    childrenB
  }
}
</script>

B组件 childrenB.vue

<template>
   <div>子组件B
       <childrenC></childrenC>
   </div>
</template>

<script>
import childrenC from './childrenC'
export default {
  components: {
    childrenC
  },
}
</script>

组件C childrenC.vue

<template>
   <div>
       <button @click="loadingParent()">组件C调用最外层父组件方法</button>
   </div>
</template>

<script>
export default {
  inject: ['parent'],
  methods: {
    loadingParent () {
      this.parent()
    }
  }
}
</script>

结果:

成功调用