前言

以下代码和内容的使用都是在setup中，未使用TS。

<script setup>
</script>

VUE3组件 (1) 关于defineProps()

VUE3组件 (2) 关于defineEmits()

VUE3组件 (3) 关于 slot 插槽

关于 Provide Inject

在组件（1）中，父子组件的传递使用的是props的方式。当只有父子两级的时候，确实很方便。但在实际开发中，组件的嵌套关系往往更加复杂，如果还是使用props，会使得组件的模版字面量非常的长，也会出现其他预期情况。

Provide和 Inject 就是用来解决上面的问题。

使用

这里使用三个组件来模拟数据传递的情况:
父级 parent：

<template><section class="item" @click="onClick">PARENT {{ num }}</section><childVue /> <!-- 引入子组件 -->
</template>
<script setup>import childVue from './child.vue';import { ref, provide } from 'vue';const num = ref(0);const onClick = () => {num.value++;}; provide('count', { num });
</script>

子组件 child ：

<template><section class="item">CHILD</section><grandchildren /><!-- 引入孙组件 -->
</template>

孙组件 grandchildren ：

<template><section class="item">GRANDCHILDREN</section><grandchildren />
</template>
<script setup>import { inject } from 'vue';const { num } = inject('count');</script>

这时页面会展示为

PARENT 0
CHILD
GRANDCHILDREN 0

语法解释

provide() 接受两个参数：

第一个参数是要注入的 key，可以是一个字符串或者一个 symbol；
第二个参数是要注入的值。

inject() 可以接受三个参数：

第一个参数是注入的 key，
第二个参数是可选的，即在没有匹配到 key 时使用的默认值。它也可以是一个工厂函数，用来返回某些创建起来比较复杂的值。
第三个参数是可选的，类型为布尔值。当第二个参数的值就是一个函数，而不是工厂函数时，需要使用将值设置为 false。

配合响应性

当使用响应式 provide/inject 值时，建议尽可能将任何对响应式状态的变更都保持在 provider 内部。这样可以确保 provide 的状态和变更操作都在同一个组件内，使其更容易维护。
如果需要在 grandchildren 中修改num的值，如点击一次加2或者更多。应当：

<template><section class="item" @click="onClick">PARENT {{ num }}</section><childVue /> <!-- 引入子组件 -->
</template>
<script setup>import childVue from './child.vue';import { ref, provide } from 'vue';const num = ref(0);const onClick = () => {num.value++;}; // 新增函数const increaseNum = (params) => {num.value += params;};// 将 increaseNum  函数作为值 提供provide('count', { num, increaseNum });
</script>

孙组件 grandchildren ：

<template><!-- 新增点击事件 --><section class="item"  @click="onClick">GRANDCHILDREN</section><grandchildren />
</template>
<script setup>import { inject } from 'vue';// 在注入出添加 increaseNum 变量const { num, increaseNum } = inject('count');// 新增的点击事件，触发 increaseNum 并且传参为 2 const onClick = () => {increaseNum(2);};
</script>

这样在点击 grandchildren 时，父组件的触发对应的函数，num每次加2。点击父组件时，每次加1。

参考

依赖注入
组合式 API：依赖注入

VUE3组件 (4) 关于 Provide Inject 依赖注入相关推荐

vue3中的provide/inject(提供/注入)
vue3中的provide/inject(提供注入) 在说provide/inject先说一下prop逐级穿透问题. 通常我们从父组件向子组件传递数据时,会用到props.对于只需要传递一层或二层时还 ...
Vue组件通讯方式 provide/inject 介绍以及使用场景
文章目录 vue的通讯方式 provide / inject的缺点使用办法代码案例展示一(provide字符串) 代码案例展示二(provide返回一个方法,并且方法返回字符串) vue的通讯方式 ...
java依赖注入inject_@inject依赖注入的过程
首先需要知道实例是如何创建以及如何被注入的,而这一切都由container这个容器进行管理. @H_403_6@1.实例构建 class ContainerImpl implements Contai ...
inject 响应式_vue 的 provide 和 inject 依赖注入与 $parent
依赖注入还是有负面影响的.它将你的应用以目前的组件组织方式耦合了起来,使重构变得更加困难.同时所提供的属性是非响应式的.这是出于设计的考虑,因为使用它们来创建一个中心化规模化的数据跟使用$root做这 ...
【React】1128- 如何在 React 组件中优雅的实现依赖注入
控制反转(Inversion of Control,缩写为IoC),是面向对象编程中的一种设计原则,可以用来减低计算机代码之间的耦合度,其中最常见的方式就是依赖注入(Dependency Inject ...
vue跨组件之间传值Provide/Inject
官网传送门:inject Vue2.2.0+ # 背景关于Vue组件的通讯方式相信大家能倒背如流父子组件:通过prop,$emit,[$root,$parent,$children] 非父子 ...
Vue 组件化通信 provide inject ,dispatch ,boardcast
入门作为前端最容易上手的框架,Vue入门其实没啥说的,我放一段清单的代码,大家能看懂就说明能上手了 <template><div id="app">< ...
Vue3+TS 中使用Provide/Inject 的例子
详见:Provide / Inject | Vue.js (vuejs.org) 作用:在深度嵌套的组件中,将 prop 沿着组件链逐级传递会很麻烦.使用 Provide/Inject可以直接将父组件 ...
【Android 组件化】路由组件 ( 页面跳转参数依赖注入 )
文章目录一.参数自动注入二.自定义注解三.使用 @Extra 自定义注解四.注解处理器解析 @Extra 自定义注解并生成相应 Activity 对应代码五.博客资源组件化系列博客 : ...

VUE3组件 (4) 关于 Provide Inject 依赖注入

前言

关于 Provide Inject

使用

语法解释

配合响应性

参考

VUE3组件 (4) 关于 Provide Inject 依赖注入相关推荐

最新文章

热门文章