vue3 provide 与 inject

我们通过props属性可以把数据传给组件，而通过provide与inject我们可以把数据传递给N个层级的子组件，比如A组件用了B组件，B组件用了C组件，它可以把组件直接从A传给C组件,vue2使用computed来实现响应式,而vue3中 provide 使用ref或reactive定义的变量即可实现响应式。

Provide Inject Setup版

A组件传入值,传入了userInfo对象，不用管传给谁了谁，谁都可以去接收key为provideCount的数据

<!-- A组件名称 app.vue -->
<template>
  <div class="itxst">
    <label>A组件显示：{{state.userInfo.count}}</label>
    <!-- 我是A组件调用了B组件,我可以把值传给B或C组件 -->
    <bcomp />
  </div>
</template>
 <script setup>
//导入 provide
import { reactive,provide } from "vue";
import bcomp from "./provideB.vue";
//定义需要传递的对象
const state=reactive({userInfo:{count:1}})
//定了 provide 的 key 和 要传递的值
provide("provideCount",state.userInfo);
</script>

B组件调用C组件,但是我啥也没干

<!-- B组件名称 provideB.vue -->
<template>
  <div class="b">
     <!-- 我是B组件调用了C组件 -->
    <ccomp/>
  </div>
</template>
 <script setup>
import { reactive } from "vue";
import ccomp from "./provideCSetup.vue";
</script>

C组件获取A组件传入的值,我修改了userInfo的值，A组件也会跟着变哦。

<!-- C组件名称 provideCSetup.vue -->
<template>
  <div class="c">
     <!-- 我是C组件获取了A组件的值 -->
    <div >
      C组件显示：  {{ userInfo.count }}
    </div> 
  </div>
</template>
<script setup>
import { inject, reactive } from "vue";
//获取 provide 传入的值
const userInfo = inject('provideCount');

//测试响应式
setInterval(function(){userInfo.count=userInfo.count+1},1000)
</script>

在线试一试

Provide Inject 选项式

<!-- A组件名称 app.vue -->
<template>
  <div class="itxst">
    <label>A组件显示：{{ userInfo.count }}</label>
    <!-- 我是A组件调用了B组件,我可以把值传给B或C组件 -->
    <bcomp />
  </div>
</template>
<script >
import bcomp from "./provideB.vue";
export default {
  name: "app",
  //注册组件
  components: {
    bcomp,
  },
  data() {
    return {
      userInfo: { count: 2 },
    };
  },
  provide() {
    //定了 provide 的 key 和 要传递的值
    return {
      provideCount: this.userInfo,
    };
  },
};
</script>  

<!-- B组件名称 provideB.vue -->
<template>
  <div class="b">
    <!-- 我是B组件调用了C组件 -->
    <ccomp />
  </div>
</template>
<script >
import ccomp from "./provideCSetup.vue";
export default {
  name: "app",
  //注册组件
  components: {
    ccomp,
  },
};
</script>  

<!-- C组件名称 provideCSetup.vue -->
<template>
  <div class="c">
    <!-- 我是C组件获取了A组件的值 -->
    <div>C组件显示： {{ userInfo.count }}</div>
  </div>
</template>
<script >
export default {
  name: "app",
  //获取 provide 传入的值
  inject: ["provideCount"],
  data() {
    return {
      //注入会在组件自身的状态之前被解析，因此可以在 data() 中访问到注入的属性
      userInfo: this.provideCount,
    };
  },
  mounted() {
    //测试响应式
    setInterval(() => {
      this.userInfo.count = this.userInfo.count + 1;
    }, 1000);
  },
};
</script>

在线试一试