当前位置：首页 > news >正文

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

news 来源：原创 2024/5/10 0:25:08

简介

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>