前言
今天在写代码时,发现一样的请求、一样的代码有些重复,代码冗余,便想着怎么减少代码量,我就先看它们发送请求、重复的代码文件,结果发现,它们的根文件都是相同的,那便想到了跨组件传值,脑海第一时间想到的就是 provide 和inject
毕竟 只需要在祖先的文件下使用 provide,后面的哪个后代后代的文件需要这个值的话,就可以直接使用inject接收就行了
实现
祖先文件
// 第一种,直接以对象的方式定义,简单是简单,但是呢,它无法访问当前的this
// 传递静态数据的时候使用
// 使用方法
provide:{
name:'测试 以对象的形式定义'
}
// 第二种,使用函数定义,它的话,就可以直接访问当前this可以传递动态数据
// 适用于绝大多数场景
// 使用方法
provide() {
return {
name:this.name
}
},
data() {
return {
name:'name'
}
}
后代文件
export default {
// 第一种方式:直接使用数组形式接收,但是呢它不能定义默认值,inject中定义的字段,父组件provide中就必须要定义,否则就会报错
inject: ['name'],
// 第二种:使用对象的方式
// 它能够定义默认属性,定义默认属性之后,即便父组件中没有在provide定义对应的属性,vue也会认为它是合法的,在使用时会自动使用默认属性
inject: {
name: {
// 也可以直接这样定义一个基本类型的值作为默认值
default: "parent prov",
// 如果你想使用引用类型的值作为默认值的话,那么你就要定义一个函数来返回他
default: () => {
// 数组作为默认值
return new Array();
// object作为默认值
return new Object();
// 方法作为默认值
return function () {};
},
// 如果父组件的provide定义的属性字段为name,而子组件中data存在一个name字段,
//此时子组件再将inject的接收字段定义为name的话。调用this.name就会出现冲突,所以子组件inject中可以定义与provide中不同的字段来接收,只需要将from接收来源指定为provide中的目标字段即可
from: "name2",
},
},
created() {
// 像使用data中的熟悉一样使用inject属性
console.log(this.name);
},
补充
祖先文件
provide() {
return {
id: () => this.injectId
}
},
后代文件 使用值
inject: ['id'],
computed: {
injectId() {
if (this.tenantId == null) {
this.tenantId = this.id()
this.getIndexShopList();
}
return this.id()
}
},
watch: {
injectId(val) {
this.tenantId = val
this.getIndexShopList();
}
},
data(){
return {
tenantId: null,
}
}