如何使用vue中的依赖注入

在使用vue的时候会出现这种情况：组件A里面嵌套了组件B，组件B里面又嵌套了组件C，然后由于一些需要，我们需要在组件C里面访问组件A的数据或者方法。

一般我们首先想到的方法是：

1.将A的数据通过父传子给B，然后B在传给C，C接收到之后在调用。

2.C组件通过子传父$emit方法传递给B，由B在传递给A，A接收到之后在处理。

3.将数据保存到vuex中使用。

针对这种多层组件嵌套的问题，vue提供了一种解决方案 -----依赖注入([provide/inject]),依赖注入就是由祖先组件通过provide定义一个可以使所有后代都可以使用的数据或方法，然后子组件通过inject获取到需要的数据或方法直接调用，如果后代组件需要改变祖先定义的数据，最好是让祖先组件定义修改的方法，然后后代组件获取之后在调用方法，不要在后代组件中直接修改数据。

示例代码：

父组件

<template>
  <div class="container">
    <p>父组件 {{money}} <button @click="add">发钱</button></p>
    <hr>
    <!-- 子组件 -->
    <Son />
  </div>
</template>
<script>
import { provide, ref } from 'vue'
import Son from './son.vue'
export default {
  name: 'App',
  components: {
    Son
  },
  setup () {
    const money = ref(1000)
    const add = () => {
      money.value += 100
    }
    const consumption = () => {
      money.value -= 100
    }
    // 将数据提供给后代组件 provide
    provide('money', money)
    // 给后代组件传递可以改变数值的方法
    provide('consumption', consumption)

    return { money, add }
  }
}
</script>

子组件

<template>
  <div class="container">
    <p>子组件 {{money}}</p>
    <hr>
    <GrandSon />
  </div>
</template>
<script>
import { inject } from 'vue'
import GrandSon from './grandson.vue'
export default {
  name: 'Son',
  components: {
    GrandSon
  },
  setup () {
    // 接收祖先组件提供的数据
    const money = inject('money')
    return { money }
  }
}
</script>

后代组件(孙子.重孙子.....)

<template>
  <div class="container">
    <p>孙组件 {{money}} <button @click="fn">消费100</button></p>
  </div>
</template>
<script>
import { inject } from 'vue'
export default {
  name: 'GrandSon',
  setup () {
    // 接收祖先组件的数据
    const money = inject('money')
    //  接收祖先组件的方法  可以改变money的值
    const fn = inject('consumption')
    return { money, fn }
  }
}
</script>

实现结果