vue3中引入新的组件传值方式，就是provide/inject依赖注入模式，在vue、react、angular三个热门前端框架中，angular是最早用到了。当然依赖注入的这种概念最早是源于后端，再次感叹下现在的前端已经不再是以前纯粹的前端了，前端的发展受到越来越多后端技术的影响，各种花里胡哨的技术都要来前端这里试试，前端程序员表示学不动了哈哈哈哈。。。笑着笑着就哭了

废话不多说了，进入正题

1.概念

它是vue提供的一种的新的组件之间的传值方式，相比原来的props这种只能在父子组件中传值的方式，provide/inject依赖注入更像是props的加强版，props只能父组件传子组件，而依赖注入传值可以由父组件传给它的所有后代，以及后代的后代，无论隔着多远，只要是它后代链上的子组件，值都能传到，可以说很强大了。

有一个需要注意的点就是，它是父子组件这种向下穿透的传值方式，所以兄弟组件之间传值是不能用依赖注入的

下面讲解依赖注入的用法，主要从两个方面来讲，第一种是在非setup函数里的用法，第二种在setup函数里的用法

2.不定义在setup函数里的一般用法

父组件提供provide

<script>
export default {
  provide: {
    user: '张三'
  }
}
</script>

后代组件注入inject

<template>
  <div>{{user}}</div>
</template>
<script>
export default {
  inject: ['user']
}
</script>

provide值是对象的时候，在大括号里是不能用this的，会报错，找不到值

<script>
export default {
  data() {
    return {
      user:'张三'
    }
  },
  provide: {
    user: this.user // Uncaught TypeError: Cannot read properties of undefined (reading 'user')
  }
}
</script>

如果希望使用父组件data里的变量来传递，这里有一种更通用的写法，建议各位记住并采用这种写法，忘掉上面那种

<script>
export default {
  data() {
    return {
      user:'张三'
    }
  },
  provide() {
    return {
      user：this.user // 这里的值即可以自定义内容，也可以使用data里的变量值
    }
  }
}
</script>

这种写法和data的函数式写法是一样的，这里只是provide端的写法改变，inject注入的写法还是跟上面的一样。依赖注入是单向数据流的传值方式，即只有从provide端改变数值才会改变inject端的数值，从inject端的改变数值不会影响到provide端的值

上面provide的这种赋值写法，虽然可以引用到父组件的data变量，但是它不是响应式的，如果user的值改变了，provide并不能检测到，如果希望user值改变的同时能让provide检测到并同步更新到inject端，这里需要用到计算属性

<script>
import { computed } from 'vue'

export default {
  data() {
    return {
      user:'张三'，
      name: '法外狂徒'
    }
  },
  provide() {
    return {
      user：computed(() => this.user),
      name: computed(() => this.name) // 多条可以依次写，互相之间不干扰
    }
  }
}
</script>

这样就可以在user每次变更的时候通知到inject端了

3.定义在setup函数中的一般用法

vue3还引入了setup函数，这也是个新东西，有了它以后，vue3差不多就有函数式编程内味了，引入setup函数后，写法上的改变还是很大的，这里我不展开讲setup函数，只讲在setup函数里的依赖注入用法，依旧以第二点中的例子为例，只不过改成setup的写法

父组件提供provide

<script>
import { provide, ref, reactive, readonly } from 'vue' // 需要引入provide

export default {
  setup() {
    const user = ref('张三') // 非引用类型的响应式ref写法
    // const user = ref({name: '张三'}) // 引用类型的响应式ref写法  user.value.name调用
    // const user = reactive({name: '张三'}) // 引用类型的响应式reactive写法， user.name调用
    // const user = '张三' // 非响应式写法
    provide('user', readonly(user)) // readonly是为了防止inject端修改数据影响到provide端
  }
}
</script>

后代组件注入inject

<template>
  <div>{{user}}</div>
</template>
<script>
import { inject } from 'vue'
export default {
  setup() {
    const user = inject('user')
    return { // 注意，在setup中定义的值需要return出去才能在子组件中直接使用
      user
    }
  }
}
</script>

setup函数里的依赖注入用法有挺多要注意的地方，我都写在代码注释里了

还需要解释的一点是，setup函数中不要使用this，因为setup的调用在data、computed、methods之前，所以用this是取不到组件的变量的

4.依赖注入在实际开发中的一些情况

1.上述2种依赖注入写法混合搭配也能正常传值和取值，例如provide端用setup写法，inject端用正常写法；或者provide端用正常写法，inject端用setup写法都是可以的，但是不建议实际开发中这样做

2.同一个组件中，存在setup写法的provide和正常写法的provide时，两个provide传的值会共存。
但是如果2个provide共同传了一个key相同，但value不同的值，则最终inject端只能接收到正常provide写法传来的值。

对于这个现象，我一开始以为是正常写法的provide的优先级高于setup写法的provide，到后来想想还存在一种可能性，就是setup写法传的值有可能是被正常写法覆盖了。因没有去看源码，所以具体是什么原因也不知道，以上只是猜测

最后

setup的知识点非常多，如果上述setup的依赖注入例子没有看懂的话，建议去官网看下setup相关的内容先
https://v3.cn.vuejs.org/guide/composition-api-setup.html setup函数
https://v3.cn.vuejs.org/guide/composition-api-provide-inject.html setup函数里的依赖注入