vue3中组件给后代组件传值，provide和inject的使用

如果只是父组件给子组件传值，我们一般用自定义属性加props接收就可以了，但是一个组件要给更深层的组件传值，一直用父传子的方式就感觉有点麻烦了。所以vue3可以使用provide来传值、用inject来接收值的方式处理这样的问题会更加方便一点。接下来我用setup()组合式API的来实现，废话不多说直接上代码...

根组件代码

<script>
import { provide } from 'vue'
export default {
  setup(){
    provide('name','xiaoming')
  }
</script>

后代组件

<script>
import { inject } from 'vue'
export default {
  setup(){
    let myName= inject('name')
    console.log(myName)  //xiaoming
  }
}
</script>