0%

vue3使用技巧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// vue3的setup语法糖内使用props
import { defineProps } from "vue";
const props = defineProps(['userInfo', 'gameId']);
// vue3的setup语法糖内使用emit
import { defineEmit } from 'vue';
const emit = defineEmit(['kk', 'up']);
const handleClick = () => {
emit('click', '点了我');
};
// vue3的setup语法糖内获取上下文
import { useContext } from 'vue'
const { slots, attrs } = useContext();
// 模块文件夹结构建议,例如:
@/views/HomePage/index.vue
@/views/HomePage/index.scss
@/views/HomePage/ts/add.ts
@/views/HomePage/ts/reduce.ts
@/views/HomePage/ts/review.ts
@/views/HomePage/ts/index.ts

// @/views/HomePage/ts/index.ts文件内容
const files = require.context('.', true, /\.ts/)
const modules: any[] = []
files.keys().forEach((key) => {
if (key === './index.ts') {
return
}

const mk = key.replace(/(^\.\/|\.ts$)/g, '')
const mkArr = mk.split('/')
const m = files(key)
const setFile = function (json: any, arr: any, file: any) {
if (arr.length > 1) {
setFile(json, arr.slice(1, arr.length), file)
} else {
if (file && file.path) json.push(file)
}
}
const file = Object.keys(m).reduce((s, e) => {
if (e !== 'default') {
s[e] = m[e]
}
return s
}, m.default || {})
setFile(modules, mkArr, file)
})
export default modules
原创技术分享,您的支持将鼓励我继续创作!

欢迎关注我的其它发布渠道

------ 本文结束------