Vue最佳实践和实用技巧（下）

1.props限制以及透传属性和插槽

props自定义限制

props: {size: {// 自定义验证函数validator: (val) => {return ["small", "medium", "large"].includes(val);},}
} 

这个验证函数接受一个实际传入的 prop值，验证并返回 true 或 false

下面将要说的是透传属性和插槽，此技巧在二次封装别人组件的时候非常有用

透传属性

<!-- 此组件为二次封装的中间组件 -->
<template><MyComponent v-bind="$attrs"/>
</template>

<script> export default { // $attrs 中的所有属性不自动继承到该组件的根元素上inheritAttrs: false,} </script> 

• $attrs包含所有透传过来的对象，除显式声明接受的props、emits、slots
• 如不希望透传下去某些属性，可使用useAttrs()

const attrs = useAttrs();
const filteredAttrs = computed(() => {return { ...attrs, style: undefined };
}); 

$attrs还可与$listeners搭配使用，$listeners包含了父组件传递的事件（不包含.native修饰器）,它可以通过v-on="$listeners"转发传入内部组件，进行对事件的监听处理

<MyComponent v-bind="$attrs" v-on="$listeners" /> 

注意： $listeners组件实例属性在Vue3.x被取消，其监听都整合到了$attrs属性上

单个slot透传

<Home><template #about>
		<!-- 在父组件使用<template #about>....</template>的template里实际插槽内容会被替换掉该组件的name为about的slot标签并继续向Home组件传递插槽--><slot name="about" /></template>
</Home> 

多个slot透传

<template #[slotName] v-for="(slot, slotName) in $slots" ><slot :name="slotName"/>
</template> 

多个slot透传作用域插槽

<template #[slotName]="slotProps" v-for="(slot, slotName) in $slots" ><slot :name="slotName" v-bind="slotProps"/>
</template>
<!-- Vue2则需要将v-for里面循环的$slots改成$scopedSlots --> 

2.require.context()和import.meta.glob()批量引入文件

• webpack统一导入相同路径下的多个组件的方法

const path = require("path");
// 参数一：说明需要检索的目录，参数二：是否检索子目录，参数三：：指定匹配文件名的正则表达式
const file