Vue3 ＜script setup lang=“ts“＞ 使用指南

注意：

• 每个 *.vue 文件最多可同时包含一个 

• <template>
• <h1>{{ msg }}h1>
• <div>{{ title }}div>
• template>

TS 版本：

 
 
 
<template>
 
<h1>{{ msg }}h1>
 
<div>{{ title }}div>
 
template>

从代码中可以发现 TS 写法里 props 没有定义默认值。

Vue3 为我们提供了 withDefaults 这个编译器宏，给 props 提供默认值。

 
 
 
<template>
 
<h1>{{ msg }}h1>
 
<div>{{ title }}div>
 
template>

一个需要注意的地方：在顶层声明一个和props的属性同名的变量，会有些问题。

<script setup>
 
const props = defineProps({
 
title: {
 
type: String,
 
default: '我是标题'
 
}
 
})
 
// 在顶层声明一个和props的属性title同名的变量
 
const title = '123'
 
 
 
script>
 
 
 
<template>
 
 
<div>{{ props.title }}div>
 
 
<div>{{ title }}div>
 
template>

所以，和组件选项一样，不要定义和 props 的属性同名的顶层变量。

defineEmits

一样的，在 

• <template>
• <h1>{{ msg }}h1>
• <button @click="handleChangeMsg">handleChangeMsgbutton>
• template>

使用组件：

 
 
 
<template>
 
<HelloWorld :msg="msg" @changeMsg="changeMsg" />
 
template>

TS 版本：

// ./components/HelloWorld.vue
 
 
 
 
<template>
 
<h1>{{ msg }}h1>
 
<button @click="handleChangeMsg">handleChangeMsgbutton>
 
template>

使用组件：

 
 
 
<template>
 
<HelloWorld :msg="msg" @changeMsg="changeMsg" />
 
template>

defineExpose

在 Vue3中，默认不会暴露任何在 

使用组件：

 
 
 
<template>
 
<HelloWorld ref="root" />
 
<button @click="handleChangeMsg">handleChangeMsgbutton>
 
template>

TS 版本：

// ./components/HelloWorld.vue
 
 
 
 
<template>
 
<h1>{{ msg }}h1>
 
template>

使用组件：

 
 
 
<template>
 
<HelloWorld ref="root" />
 
<button @click="handleChangeMsg">handleChangeMsgbutton>
 
template>

2.4. 辅助函数

在 

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

// ./components/HelloWorld.vue
 
 
 
 
<template>
 
 
<div>{{ $attrs.title }}div>
 
template>

useSlots

在模板中使用 $slots 来访问 slots 数据。

在 

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

 
 
 
<template>
 
<div>
 
 
<slot>slot>
 
<slot name="footer">slot>
 
div>
 
template>

useCssModule

在 Vue3 中，也是支持 CSS Modules 的，在