Vue的provide和inject使用_inject 接受数组中可以是对象吗-CSDN博客

本文链接：https://blog.csdn.net/l_jin_c/article/details/120857528

本文详细介绍了Vue中如何通过provide和inject机制实现父组件向子组件乃至更深层次组件的值传递，包括提供者与接收者的使用方法和示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关系：父组件->子组件a->孙组件b。父home.vue包含子组件a，子组件a包含子组件b。

作用：父组件需要传值给子组件或者孙组件或者更深层次的孙孙..组件。

父home.vue

<template>
  <div class="home">
    {{msg}}
    <item_a></item_a>
  </div>
</template>

<script>
// @ is an alias to /src
import item_a from "@/components/item_a.vue";

export default {
  name: "Home",
  data() {
    return {
      msg: "vue的provide和inject"
    };
  },
    
  //provide可以是一个对象或者是一个返回对象的函数。
  // provide: {
  //   text: "provide，在父注入内容"
  // },
  provide() {
    return{
      text: "provide，在父注入内容"
    }
  },
  components: {
    item_a
  }
};
</script>

子组件a（item_a.vue）

<template>
  <div>
    {{msg}}
    <item_b></item_b>
  </div>
</template>
 
<script>
import item_b from "@/components/item_b.vue";
export default {
  data() {
    return {
      msg: this.text
    };
  },
  // inject是接收,inject可以是：一个字符串数组，或 一个对象，对象的 key 是本地的绑定名
  inject: ["text"],
  components: {
    item_b
  }
};
</script>
 
<style lang = "less" scoped>
</style>

孙组件b（item_b.vue）:

<template>
  <div>{{msg}}</div>
</template>
 
<script>
export default {
  data() {
    return {
      // msg: "item_b"
      msg: this.text
    };
  },
  // inject是接收
  inject: ["text"]
};
</script>
 
<style lang = "less" scoped>
</style>

步骤很简单：

在父组件注入需要传给子或者孙的内容，格式:

provide:{
    注入的内容的属性名xx:"注入内容yy"
}
//跟components同级

需要父组件的值的子组件和孙组件或者孙孙组件都可以用它inject接收

invide:['从父组件注入内容的属性名xx'],
data(){
    属性名: this.xx   //使用从父组件注入的内容
}