vue3中在
// main.js
import axios from "axios";
app.provide("$axios", axios);
app.mount("#app");
// Home.vue
import { inject } from "vue";
const http = inject("$axios");
const getUser = () => {
http
.post(
"/getEmployeeBaseInfo",
{
empNumber: "12345",
},
{ headers: { "Content-Type": "application/x-www-form-urlencoded" } }
)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.finally(function () {
// 总是会执行
});
};
provide 和 inject 主要为高阶插件/组件库提供用例。
并不推荐直接用于应用程序代码中。
定义说明:这对选项是一起使用的。以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
通俗的说就是:组件得引入层次过多,我们的子孙组件想要获取祖先组件得资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱。这个就是这对选项要干的事情。
provide:是一个对象,或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西,也就是属性和属性值。
inject:一个字符串数组,或者是一个对象。属性值可以是一个对象,包含from和default默认值。
一句话介绍:provide可以向所有子孙组件提供数据以及提供修改数据的方法,子孙组件用inject使用数据。