Vue3.0 provide与inject依赖注入：VCA

简介

provide 与 inject 是一种跨层级组件（祖孙）通信方式。当组件多层嵌套时，不需要将数据一层一层的向下传递，通过它俩可以实现跨层级组件通信。

provide：提供者

注入一个值，可以被后代组件接收。

provide它接受两个参数：

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

inject：接收者

接收一个由祖先组件或整个应用 (通过 app.provide()) 注入的值。

inject它接受两个参数：

第一个参数是注入的 key，找不到对应的 key，则返回 undefined 或默认值。
1. Vue 会遍历父组件链，通过匹配 key 来确定所提供的值。如果父组件链上多个组件对同一个 key 提供了值，那么离得更近的组件将会 "覆盖" 链上更远的组件所提供的值。如果没有能通过 key 匹配到值，inject 将返回 undefined，除非提供了一个默认值。
第二个参数是默认值，非必填，也可以是一个工厂函数。

如果默认值本身就是一个函数，那么你必须将 false 作为第三个参数传入，表明这个函数就是默认值，而不是一个工厂函数。

const fn = inject('function', () => {}, false)

案列

App.vue组件

<template><div><Child></Child><div v-if="isShow">{{user.name}}--{{user.age}}--{{user.email}}</div><div>{{}}</div></div>
</template>
<script>
import { ref, provide, toRef, reactive } from 'vue';import Child from "./components/Child.vue" //导入Child组件模板
export default {components: {Child: Child //注册Child子组件},setup(props, context) {const isShow = ref(true);const email = ref("123@qq.com");const user = ref({name: "张三",age: 18,email,})const data = reactive({baseUrl: "http://localhost/",port: "8080",action: "login"})const myFun=()=>{email.value="999@qq.com";}provide("user", user);  //向后代组件提供一个user对象provide("email", email) //向后代组件提供一个email对象provide("data", data);provide("myFun",myFun,true); //向后代组件提供一个函数，如果提供的是一个函数，第三个参数必须为true  在注入的时候用法：const myfun=inject("myFun"); 然后可以直接执行函数：myfun()return {isShow,user,}}
}
</script>

Child.vue子组件

<template><div><button>返回</button><button @click="myClick">点我改名</button></div>
</template>
<script>
import {inject, ref } from 'vue';export default {setup() {const user=inject("user");console.log(user.value.email);console.log(user.value.name);console.log(user.value.age);const emial=inject("email");console.log(emial.value);const data=inject("data");console.log(data.baseUrl);console.log(data.port);console.log(data.action);const myfun=inject("myFun"); //注入一个函数const myClick=()=>{//在VOA模式中，我们的案例在provide向后代组件提供了一个this 即：provide(){ return{app:this}}目的是为了再后代组件中可以修改祖组件中的对象值。//在VCA模式中，因为user在app.vue中user是用ref包装的，它是响应式的：所以这里修改后就直接修改了父组件app.vue中的user.value.name值了。不需要依赖this了user.value.name="李四";myfun();}return {myClick,}}
}
</script>

Vue3.0 provide与inject依赖注入：VCA相关推荐

inject 响应式_vue 的 provide 和 inject 依赖注入与 $parent
依赖注入还是有负面影响的.它将你的应用以目前的组件组织方式耦合了起来,使重构变得更加困难.同时所提供的属性是非响应式的.这是出于设计的考虑,因为使用它们来创建一个中心化规模化的数据跟使用$root做这 ...
java依赖注入inject_@inject依赖注入的过程
首先需要知道实例是如何创建以及如何被注入的,而这一切都由container这个容器进行管理. @H_403_6@1.实例构建 class ContainerImpl implements Contai ...
VUE3组件 (4) 关于 Provide Inject 依赖注入
前言以下代码和内容的使用都是在setup中,未使用TS. <script setup> </script> VUE3组件 (1) 关于defineProps() VUE3组件 ...
把旧系统迁移到.Net Core 2.0 日记（2) - 依赖注入/日志NLog
Net Core 大量使用依赖注入(Dependency Inject), 打个比方,我们常用的日志组件有Log4Net,NLog等等. 如果我们要随时替换日志组件,那么代码中就不能直接引用某个组件的 ...
使用Java 8.0进行类型安全的依赖注入
所以有时我真的很想念旧学校的依赖注入. 当Spring仍然"轻量级"时,我们很高兴地用" 一天学习 " Spring bean xml配置在applicatio ...
vue3中 provide 和 inject 用法
前言: 在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时, ...
Vue3的provide、inject使用方法
在 Vue3 中,provide 和 inject 是用于跨层级组件通信的方法.可以通过 provide 方法向下传递数据,然后通过 inject 方法在子组件中访问这些数据. provide 方法接 ...
【转载】详解 Spring 3.0 基于 Annotation 的依赖注入实现
转载自:http://www.ibm.com/developerworks/cn/opensource/os-cn-spring-iocannt/ Spring 的依赖配置方式与 Spring 框架的 ...
详解 Spring 3.0 基于 Annotation 的依赖注入实现--转载
使用 @Repository.@Service.@Controller 和 @Component 将类标识为 Bean Spring 自 2.0 版本开始,陆续引入了一些注解用于简化 Spring 的 ...
如何为 .NET Core 3.0 中 WPF 配置依赖注入 ?
咨询区 user842818: 我非常熟悉 ASP.NET Core 和它开箱即用的依赖注入支持,当 Controller 需要依赖注入时,可以在构造函数中以参数的形式来实现,这个IOC的理念相当 ...

Vue3.0 provide与inject依赖注入：VCA

简介

provide：提供者

provide它接受两个参数：

inject：接收者

inject它接受两个参数：

案列

App.vue组件

Child.vue子组件

Vue3.0 provide与inject依赖注入：VCA相关推荐

最新文章

热门文章