二.Vue3.x（格式）

前言

补充一些官方文档中没有的，但是实际开发中最好需要了解的内容

1.setup

1.props

• 格式1

type component = { is: string; class?: string; text: string };
const { data, columnData } = defineProps<{
    data?: component[];
    columnData?: { component?: component }[];
}>();

• 格式2

const { title, subTitle, footer, customClass } = defineProps({
    customClass: {
        type: String,
        default: ''
    },
    title: {
        type: String,
        default: ''
    },
    subTitle: {
        type: String,
        default: ''
    },
    footer: {
        type: Array<{ is: string; class?: string; text: string; click?: () => void }>,
        default: () => []
    }
});

2.name

• 方式1

defineOptions({
    name: 'xxxxx'
});

• 方式2

pnpm i vite-plugin-vue-setup-extend

import VueSetupExtend from 'vite-plugin-vue-setup-extend'
 
...
 
plugins: [ VueSetupExtend() ]

<script setup name="xxx">  
 
</script>

2.component