vue3 的一些知识点

9/13/2021 Vue

# vue3+ts 的 PropType 类型验证

官网链接 (opens new window)

  1. 引入
import { PropType } from 'vue'
1
  1. 定义接口
interface oneOptions {
    label: string
    value: number | string
    [key: string]: any
}
1
2
3
4
5
  1. 属性验证
props: {
    options: {
        type: Object as PropType<oneOptions>,
        default: () => {
            return []
        },
        required: true,
    },
}
1
2
3
4
5
6
7
8
9

# vue3 使用 ref 获取 dom 元素

<template>
    <div ref="myRef">ref的内容</div>
    <el-form :model="form" label-width="100px" ref="ruleForm">
        ...
    </el-form>
    <el-button @click="handleSubmit">提交</el-button>
</template>
<script lang="ts">
    import { defineComponent, ref, onMounted, reactive } from 'vue'
    export default defineComponent({
        setup() {
            const myRef = ref<HTMLElement>()
            const form = reactive({})
            const ruleForm = ref<HTMLElement>()
            onMounted(() => {
                console.log('myRef', myRef.value)
                // 因为获取到的dom可能是undefined,所以获取属性时加个?[可选链操作符],表示myRef.value存在的时候才获取clientHeight属性
                console.log('height', myRef.value?.clientHeight)
            })
            // 提交前进行表单校验
            const handleSubmit = () => {
                ruleForm.value.validate((valid: boolean) => {
                    if (valid) {
                    } else {
                        return false
                    }
                })
            }
            return {
                myRef,
                form,
                ruleForm,
            }
        },
    })
</script>
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

# Suspense(不确定的)

  • 作用 使应用在等待异步组件渲染时候,渲染一些其他内容,可以创建一个平滑的用户体验

  • 使用 子组件

<template>
    <h2>AsyncComp22</h2>
    <p>{{ msg }}</p>
</template>

<script lang="ts">
    export default {
        name: 'AsyncComp',
        setup() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve({
                        msg: 'april',
                    })
                }, 2000)
            })
        },
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

父组件

<template>
    <Suspense>
        <!-- v-slot:defaul可以简写成#defaul -->
        <template v-slot:default>
            <AsyncComp />
        </template>

        <template v-slot:fallback>
            <h1>LOADING...</h1>
        </template>
    </Suspense>
</template>

<script lang="ts">
    import { defineAsyncComponent } from 'vue'
    const AsyncComp = defineAsyncComponent(() => import('./AsyncComp.vue'))
    export default {
        setup() {
            return {}
        },

        components: {
            AsyncComp,
        },
    }
</script>
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

效果图

效果图

上次更新: 9/26/2021, 2:54:35 PM