Script Setup 语法糖

Composition API: setup() | Vue.js

Note This page documents the usage of the setup component option. If you are using Composition API with Single-File Components, is recommended for a more succinct and ergonomic syntax. The setup() hook serves as the entry point for Composition API usage in components in the following cases: Using Composition API without a build step; Integrating with Composition-API-based code in an Options API component.

https://vuejs.org/api/composition-api-setup.html

使用props

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

设置默认值

const props = withDefaults(defineProps<{
  option: {
    provinceCd: string
    provinceAreaCode: string
    provinceName: string
    cityList: {
      cityId: number
      cityCd: string
      cityName: string
      provinceCd: string
      provinceAreaCode: string
      biBelongProvinceCd: number
      policyAllocationFlg: number
    }[]
  },
  modelValue: string[]
}>(), {
  modelValue: () => []
})

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>