Script Setup 语法糖

使用props

<script lang="ts" setup>
import { defineProps } from "vue";
const props = defineProps(['title', 'content']);
</script>

ts注解

defineProps<{
  title?: string
  content: string
}>();

emits

const emit = defineEmit(['onHeaderClick'])
emit('onHeaderClick', 'params')

// 对事件进行验证
const emit = defineEmit({
    onHeaderClick: ({title}) => {
        if(!title) {
            console.warn('Invalid title')
            return false
        }
        return true
    }
})

useContext

import { useContext } from 'vue'
const { slots, attrs } = useContext()

directive

<script setup>
  import {color} from './v-color'
</script>

<template>
  <div v-color />
</template>

如果是指令 自动映射为v-

使用setup的参数

<script setup="props, context" lang="ts">
// 自动导入
<script>