导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

业务技能

针对性攻坚

AI

🔥 v-bind="obj" 展开属性

• v-bind="obj" 相当于 :a="obj.a"、:b="obj.b"

父组件

<template>
	<div>
    <sub-comp
    	v-bind="obj"
    ></sub-comp>
  </div>
</template>
<script>
export default {
	data() {
		obj: {
			a: 1,
			b: 2
		}
	}
}
</script>

子组件

<template>
	<div>{{ a }} {{ obj.a }}</div>
</template>
<script>
export default {
	props: ['obj', 'a', 'b']
}
</script>

子组件两种方式都能访问

props 支持的验证类型

null、undefined 可以通过验证

🔥 required 必须传值

但加上 required 就可以验证了：

props: {
  age: {
    required: true,
    type: Number
  }
},

<main-login
  :age="undefined"
></main-login>

🔥 多类型定义

props: {
  age: [ Number, String ]
},

props: {
  age: {
    required: true,
    type: [ Number, String ]
  }
},

🔥 默认值

props: {
  a: {
    required: true,
    type: Number,
    default: 0
  },
  b: {
    required: true,
    type: Number,
    default: 0
  }
},

🔥 默认的是引用值

• 利用工厂函数，导出一个新的对象
• 避免引用的是同一个对象

props: {
	article: {
    type: Object,
    default() {
      return {
      	title: '',
        content: ''
      }
    }
  }
}

🔥 对传值进行验证

props: {
	btnType: {
    required: true,
    validator(value) {
    	return [
      	'primary',
        'success',
        'warning',
        'danger'
      ].includes(value);
    }
  }
}

🔥 default、validator 中不能使用 data 属性

• default、validator 这些验证是在创建组件实例之前做的（props 在 data 之前被初始化）
• 所以拿不到组件 data 中的属性

props: {
	age: {
    required: true,
    type: Number,
    default() {
    	console.log(this.tabData);
    }
  },
}

如果 props 验证过多，可以把其提出来单独放个文件

validator.js

export const MyDemo = {
	age: {
    required: true,
    type: Number,
    default() {
    	console.log(this.tabData);
    }
  },
  btnType: {
    required: true,
  	 validator(value) {
    	return [
      	'primary',
        'success',
        'warning',
        'danger'
      ].includes(value);
    }
  }
}

comp.vue

import { MyDemo } from './validator';

export default {
	props: MyDemo
}