vue3 provide/inject 的用法

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

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

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

在这里插入图片描述

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

  • 父组件不需要知道哪些子组件使用它 provideproperty
  • 子组件不需要知道 injectproperty 来自哪里
<!-- 父组件 -->
<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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值