Vue3学习笔记之依赖注入Provide/Inject
更新时间：2023年05月09日 11:17:11 作者：小满zs
provide和inject可以实现嵌套组件之间进行传递数据,这两个函数都是在setup函数中使用的,下面这篇文章主要给大家介绍了关于Vue3学习笔记之依赖注入Provide / Inject的相关资料,需要的朋友可以参考下
Provide / Inject
通常，当我们需要从父组件向子组件传递数据时，我们使用 props。想象一下这样的结构：有一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦。
官网的解释很让人疑惑，那我翻译下这几句话：
provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法，而在任何后代组件中，我们都可以使用 inject 来接收 provide 提供的数据或方法。
看一个例子
父组件传递数据
<template>
<div class="App">
<button>我是App</button>
<A></A>
</div>
</template>
<script setup lang='ts'>
import { provide, ref } from 'vue'
import A from './components/A.vue'
let flag = ref<number>(1)
provide('flag', flag)
</script>
<style>
.App {
background: blue;
color: #fff;
}
</style>子组件接受
<template>
<div style="background-color: green;">
我是B
<button @click="change">change falg</button>
<div>{{ flag }}</div>
</div>
</template>
<script setup lang='ts'>
import { inject, Ref, ref } from 'vue'
const flag = inject<Ref<number>>('flag', ref(1))
const change = () => {
flag.value = 2
}
</script>
<style>
</style>TIPS 你如果传递普通的值 是不具有响应式的 需要通过ref reactive 添加响应式
使用场景
当父组件有很多数据需要分发给其子代组件的时候， 就可以使用provide和inject。
总结
到此这篇关于Vue3学习笔记之依赖注入Provide/Inject的文章就介绍到这了,更多相关Vue3依赖注入Provide/Inject内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue3自定义hooks/可组合函数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
如何在Vue3中正确使用ElementPlus,亲测有效,避坑
这篇文章主要介绍了如何在Vue3中正确使用ElementPlus,亲测有效,避坑！具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要给大家介绍了利用Vue.js仿微信过渡动画左右切换效果的相关资料，需要用到的技术栈是Vue+Vuex。文中通过示例代码介绍的非常详细，对大家具一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-06-06
今天小编就为大家分享一篇vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
本文主要介绍了nuxt.js框架使用小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-08-08
这篇文章主要介绍了vue使用ElementUI时导航栏默认展开功能的实现,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
本文给大家分享的是如何使用vue实现鼠标点击选中的效果，附上了实例代码，有需要的小伙伴可以参考下2020-10-10
弹窗是我们开发中经常遇到的一个功能,下面这篇文章主要给大家介绍了关于vue如何通过点击事件弹出弹窗页面的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了彻底搞懂并解决vue-cli4中图片显示的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
本文主要介绍了Vite热更新失效的问题解决,原因是文件夹和文件名大小写不一致,下面就来解决一下次问题,感兴趣的可以了解一下2024-08-08
最新评论