vue2中依赖注入用法

这是最基本的使用,后期可以探索一下

//父组件:
export default {
    
    
  name: COMPONENT_NAME,
  components: {
    
    
    Header
  },
  // 当前表单是否通过校验
  provide() {
    
    
    return {
    
    
      passValidator: this.passValidator,
      handlerPassValidator: this.handlerPassValidator
    };
  },
  props: {
    
    
      
  },
  data() {
    
    
  passValidator: false // 依赖注入,各个组件内验证通过后更改true
     }
  methods: {
    
     
	// 是否通过校验(依赖注入)
    handlerPassValidator(item) {
    
    
      this.passValidator = item;
    }
}
// 子组件
export default {
    
    
  name: COMPONENT_NAME,
  props: {
    
    
      
  },
  inject: ['passValidator', 'handlerPassValidator'],
  data() {
    
     }
  methods: {
    
     
  // 是否通过校验
    async whetherPassValidator() {
    
    
      await this.validate.validateAll().then(() => {
    
    
        if (this.validate.valid) {
    
    
          this.handlerPassValidator(true);
        } else {
    
    
          this.handlerPassValidator(false);
        }
      });
    }
} 
  

猜你喜欢

转载自blog.csdn.net/weixin_43131046/article/details/124174576