1、优雅导入组件等文件

index.js

// 三个参数
// directory {String} -读取文件的路径
// useSubdirectories {Boolean} -是否遍历文件的子目录
// regExp {RegExp} -匹配文件的正则
// require.context(‘./test’, false, /.test.js$/);
// 上面的代码遍历当前目录下的test文件夹的所有.test.js结尾的文件,不遍历子目录
const contexts = require.context('./', false, /\.vue$/)
const components = []
let removeList = [] //要排除某个文件
contexts.keys().forEach(key => {//遍历子目录
    const name = key.replace(/(\.\/|\.vue)/g, '')
    removeList.includes(name) ? '' : components[name] = resolve => require([`${key}`], resolve)
})
//由export default改为 export
export {
    components
}

2、prop

父组件给子组件通常通过props传值，如果需要做一些强校验则可以使用validator
如父组件传入一个propType参数，规定只能传入’text’, ‘number’或者’letter’其中一种就可以这么写：

props: {
	propType: {
		type: String,
		default:  'text',
		validator() {
			return ['text', 'number','letter'].indexOf(propType) > -1
		}
 	}
}

又或者你想传入一个参数，但是想限制它的长度，那你也可以使用validator进行强校验

props: {
	lintLength: {
		type: Array,
		default: () => [],
		validator() {
			return lintLength.length < 6
		}
 	}
}

3、插槽

深受启发
https://blog.csdn.net/weixin_66375317/article/details/124673576

3.1、默认插槽（自动填坑）

3.2、具名插槽（对应填坑）

v-slot: 可以简化成#

3.3、作用域插槽（携带参数）

默认插槽 =》1. 子组件标签下不使用template写html结构 2. 子组件通过
具名插槽 => 1. 子组件标签下使用template =》包裹传递html结构 =》template上提供名字#插槽名 2. 子组件通过传递数据=》子传父
作用域插槽=> 1. 子组件<slot name=“插槽名” :传递数据的名字=“变量”> 2. 父组件=》<template #插槽名=“接收数据对象”>

4、 单作用域 slot 的简写（不需要模板标签！）

Scoped slot 比较有趣，但为了使用它们，你也必须使用很多template标签。
然而有一个速记可以让我们摆脱它，但前提是我们使用单个作用域slot。

可以不用这样写：

<DataTable>
  <template #header="tableAttributes">
    <TableHeader v-bind="tableAttributes" />
  </template>
</DataTable>

可以这么写：

<DataTable #header="tableAttributes">
  <TableHeader v-bind="tableAttributes" />
</DataTable>