vue3 provide,inject

当跨级传递数据,用传统的props需要逐层传递太过于繁琐,vue3中使用provide,inject很方便的解决这个问题

第一级组件中:

<script>
import child from "./components/child.vue";
import { reactive,provide,inject} from 'vue'
export default {
  components:{
    child,
  },
  setup() {
    let person = reactive({
      name:'张三',
      age: 70
    })
    provide('person',person)
  }
}
</script>

<template>
  <div>
    <child/>
  </div>
</template>

第二级组件

<template>
  <div class="child">
    child
    <Son/>
  </div>
</template>

<script>
import Son from "./son.vue";
export default {
  components: {Son}
}
</script>
<style scoped>
  .child{

  }
</style>

第三级组件中

<template>
 <div>
   son: {{p}}
 </div>
</template>

<script>
import {inject,reactive} from "vue"
export default {
  name: "son",
  setup() {
    let son = reactive({
      name:'张五',
      age:10
    })
    let  p = inject('person')
    console.log(p)  // {age: 70，name: "张三"}
    return {p}
  }
}
</script>

<style scoped>

</style>