🟡Vue3.2特性

本文最后更新于:2022年5月5日 晚上

setup语法糖

数据自动导出可用

使用全局的setup无需再用return导出定义的数据即可在模板与样式中使用

1
2
3
4
5
6
7
8
9
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">
{{ count }}
</button>
</template>

.vue文件导入组件自动注册

导入组件无需再用components手动注册

1
2
3
4
5
6
<script setup>
import Header from '@/components/Header.vue'
</script>
<template>
<Header />
</template>

props传值

使用defineProps()来接收参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
const props = defineProps(['name', 'age'])
</script>

<!-- 也可传入字面量指定类型,默认值等等 -->
<script>
const props = defineProps({
name: String,
age: {
type: Number,
default: 20,
}
})
</script>

TS支持

也可配合TypeScript使用泛型函数定义,这样就可利用ts的类型约束(不加可选符即为必选参数)

1
2
3
4
5
6
7
<script lang="ts">
interface Props {
name: string | undefined,
age?: number
}
const props = defineProps<Props>()
</script>

若使用泛型并添加默认值则需要withDefaults

1
2
3
4
5
6
7
8
9
10
11
<script lang="ts">
interface Props {
name: string,
age: number[]
}
const props = withDefaults(defineProps<Props>(), {
name: '清山',
age: () => [20, 18]
/* 默认值为引用类型需用箭头函数包装 */
})
</script>

自定义事件


🟡Vue3.2特性
https://qingshaner.com/vue3-2基础/
作者
清山
发布于
2022年1月19日
许可协议