🟡Vue3.2特性

setup语法糖

数据自动导出可用

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

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
  <button @click="count++">
    {{ count }}
  </button>
</template>

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

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

<script setup>
import Header from '@/components/Header.vue'
</script>
<template>
  <Header />
</template>

props传值

使用defineProps()来接收参数

<script>
const props = defineProps(['name', 'age'])
</script>

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

TS支持

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

<script lang="ts">
interface Props {
  name: string | undefined,
  age?: number
}
const props = defineProps<Props>()
</script>

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

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

自定义事件