vue3 provide/inject 的用法

最新推荐文章于 2024-09-14 02:04:22 发布

guizi0809

最新推荐文章于 2024-09-14 02:04:22 发布

阅读量631

点赞数

分类专栏： vue3 文章标签： vue

本文链接：https://blog.csdn.net/guizi0809/article/details/118447817

版权

vue3 专栏收录该内容

11 篇文章 3 订阅

订阅专栏

本文介绍了Vue中使用provide/inject进行跨层级组件间数据传递的方法，避免了props逐级传递的繁琐。通过父组件的provide选项提供数据，子组件的inject选项接收数据，实现了类似‘longrangeprops’的功能，使得父子组件间通信更为便捷，且保持了组件的解耦。示例展示了如何在父组件、子组件以及孙子组件之间进行数据流动。

摘要由CSDN通过智能技术生成

通常，我们从父组件向子组件传递数据（或者说子组件接收父组件传递的数据）时，使用 props。当我们想用父组件向深层子组件传递数据时，需要使用 props 沿着组件链逐级传递下去，十分麻烦，这时 provide/inject 就可以派上用场。

论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个inject 选项来开始使用这些数据。

在这里插入图片描述

实际上，你可以将依赖注入看作是“long range props”，除了：

父组件不需要知道哪些子组件使用它 provide 的 property
子组件不需要知道 inject 的 property 来自哪里

<!-- 父组件 -->
<template>
  <div>
    <button @click="handleChange">按钮</button>
    <child-component></child-component>
  </div>
</template>
<script>
  import ChildComponent from '@/components/child-component'
  import { reactive } from 'vue'
  export default {
    components: {
      ChildComponent
    },
    // 注意：要访问组件实例 property，我们需要将 provide 转换为返回对象的函数，否则不起作用
    provide() {
      return {
        obj: this.obj
      }
    },
    setup() {
      const obj = reactive({name: '对象', age:12})
      const handleChange = () => {
        obj.name = '名称改变了'
      }
      return { obj, handleChange }
    }
  }
</script>

<!-- 子组件 child-component -->
<template>
  <div>
    <sun-component></sun-component>
  </div>
</template>
<script>
  import SunComponent from './sun-component'
  export default {
    components: { SunComponent },
  }
</script>

<!-- 孙子组件 sun-component -->
<template>
  <div>
    孙子组件：{{obj.name}}
  </div>
</template>
<script>
  export default {
    inject: ['obj']
  }
</script>