vue3中任意嵌套组件传参，provide与inject

一般父组件向子组件传值，可以通过props  (defineProps).但是跨组件传参使用props过于麻烦，推荐可以透传的provide和inject

 

provide 提供数据     inject注入数据

App.vue代码

<script setup>
import { ref,provide} from 'vue'
import Son from "./son.vue";
const greet=ref('今天天气不错，气温舒适');
const blessing=ref('平平安安')
provide("blessing",blessing);
</script>

<template>
  <Son :greet='greet'/>
</template>

 

 son.vue代码

<script setup>
import grandson from "./grandson.vue"
defineProps(['greet'])

</script>

<template>
  <div>
    <slot />

  <h3>我是儿子组件</h3>
  <p>父亲给儿子发消息:{{greet}}</p>
  
  <grandson/>
  </div>
</template>

grandson.vue代码

<script setup>
  import {inject} from "vue";
let info=inject('blessing')
</script>

<template>
  <div>
    <slot />
    <h3>我是孙子组件</h3>

    <p>爷爷对孙子的祝福:{{info}}</p>
  </div>
</template>

在vue3中，哪里需要provide和inject，哪里显式从vue中引入;并且provide和inject不会响应式的更新数据，所以可以传递ref和reactive定义的数据。

import {provide,inject} from 'vue';

provide(name,value)；//name是String类型

let result=inject(name)  //name是String类型