对于provide [prəˈvaɪd]和inject官网解释是这样的:这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。
简单理解就是父组件可以通过provide向子孙组件传值,子组件通过inject来接收
// 父级组件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// 子组件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}
通过provide和inject去让父组件去统一管理子孙组件状态,举个例子有个家庭联系人表单
表单内默认都是非必填的,只要填了一信息后其他都是必填的,要完成这个功能就可以使用provide和inject
//父组件
provide() {
return {
ValidateGroup: this//这个this是父组件实例
}
},
data() {
return {
hasValueMemberCount: 0,//这是父组件用于标记表单中已经填写的字段个数
};
},
computed: {
shouldRequireValidate() {//这个计算属性用于判断是否表单所有字段都必填
return this.hasValueMemberCount > 0;
}
},
methods: {
add() {//hasValueMemberCount增加的方法
this.hasValueMemberCount++
},
minus() {//hasValueMemberCount减少的方法
this.hasValueMemberCount--
},
}
//子孙组件
inject: {
ValidateGroup: {//接收父组件的实例
default: null
}
},
watch: {
value: {//监听单个表单中的值是否改变
handler(newValue, oldValue) {
if (!!this.ValidateGroup) {
this.handleMemberValueChangeForGroup(newValue, oldValue);
}
}
}
},
methods: {
handleMemberValueChangeForGroup(newVal, oldVal) {
// 加一(从 空值 变成 有值)
if (oldVal === "" && newVal !== "") {
this.ValidateGroup.add();
}
// 减一 (从 有值 变成 空值)
if (oldVal !== "" && newVal === "") {
this.ValidateGroup.minus();
}
},
// 判断组成员是否需要跳过非空校验
isSkipMemberRequireValidate() {
let isSkip = true;
if (this.hasValidateGroup && this.ValidateGroup.shouldRequireValidate) {
isSkip = false;
}
return isSkip;
}
}
在上述代码中,当isSkipMemberRequireValidate为false时子孙组件开启非空校验,这样做的好处就是以后父组件中增加其他子孙组件字段时,其他子孙组件也有自动判断是否开启非空校验的功能,组件扩展性更高
版权声明:本文为HOMEXS原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。