本文主要是介绍Vue3.0 provide与inject依赖注入：VCA，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
简介
provide 与 inject 是一种跨层级组件（祖孙）通信方式。当组件多层嵌套时，不需要将数据一层一层的向下传递，通过它俩可以实现跨层级组件通信。
provide：提供者
注入一个值，可以被后代组件接收。
provide它接受两个参数：
- 第一个参数是要注入的 key，可以是一个字符串或者一个 symbol。
- 第二个参数是要注入的值。
inject：接收者
接收一个由祖先组件或整个应用 (通过 app.provide()) 注入的值。
inject它接受两个参数：
- 第一个参数是注入的 key，找不到对应的 key，则返回 undefined 或默认值。
- 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的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
