vue3.0 + setup +lang=“ts“_setup lang="ts-优快云博客

本文介绍了Vue3.0的<script setup>语法，如何使用defineProps、withDefaults定义和设置默认props，以及通过defineEmits处理事件。同时，详细阐述了useAttrs和useSlots在访问属性和插槽数据上的应用，并展示了顶层await的支持，提升开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只需要给 script 标签添加一个 setup 属性，那么整个 script 就直接会变成setup函数，所有顶级变量、函数，均会自动暴露给模板使用（无需再一个个 return了），开发效率将大大的提高！vue3.0 + setup +lang=“ts”

defineProps

来声明 props 相关信息。defineProps 接收的对象和组件选项 props 的值一样。
interface ListItem {
  name: string
  age: number
}
const props = defineProps<{
  msg: string
  title: string
  list: ListItem[]
}>()

withDefaults

// withDefaults 的第二个参数便是默认参数设置，会被编译为运行时 props 的 default 选项
interface ListItem {
  name: string
  age: number
}
interface Props {
  msg: string
  // title可选
  title?: string
  list: ListItem[]
}
const props = withDefaults(defineProps<Props>(), {
  title: '我是标题',
  // 对于array、object需要使用函数，和以前的写法一样
  list: () => []
})

defineEmits

编译器宏声明 emits 相关信息。
const emits = defineEmits<{
  (e: 'changeMsg', value: string): void
}>()

const handleChangeMsg = () => {
  emits('changeMsg', 'Hello TS')
}

useAttrs

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld class="hello-word" title="我是标题" />
</template>

// ./components/HelloWorld.vue
<script setup>
import { useAttrs } from 'vue'

const attrs = useAttrs()
// js中使用
console.log(attrs.class)  // hello-word
console.log(attrs.title)  // 我是标题
</script>

<template>
  <!-- 在模板中使用 $attrs 访问属性 -->
  <div>{{ $attrs.title }}</div>
</template>

useSlots

//在模板中使用 $slots 来访问 slots 数据。
//在 <script setup> 中使用 useSlots 函数获取 slots 插槽数据。

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld>
    <div>默认插槽</div>
    <template v-slot:footer>
      <div>具名插槽footer</div>
    </template>
  </HelloWorld>
</template>

<script setup>
import { useSlots } from 'vue'

const slots = useSlots()
// 在js中访问插槽默认插槽default、具名插槽footer
console.log(slots.default)
console.log(slots.footer)
</script>

<template>
  <div>
    <!-- 在模板中使用插槽 -->
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

顶层await支持

//<script setup> 中可以使用顶层 await。结果代码会被编译成 async setup()

<script setup>
	const userInfo = await fetch(`/api/post/getUserInfo`)
</script>