借助插件vite-plugin-vue-setup-extend，可以直接在script標(biāo)簽上定義name。

1.安裝

npm i vite-plugin-vue-setup-extend -D

2.配置

// vite.config.ts

import { defineConfig } from 'vite'

import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({

??plugins: [

????VueSetupExtend()

??]

})

3.使用：

<script lang="ts" setup name="firstPage">

import { onMounted } from 'vue'

onMounted(() => {

??console.log('mounted')

})

</script>

建議這樣修改：

父組件中：

<template v-slot:renderScope="{ data, index }">

? ? ? ? ? ? ? ? ? ? <div>{{ data.name }}---{{ data.age }}---{{ index }}</div>

子組件中：

<div v-for="(item, index) in slotData">

? ? ? ? <slot name="renderScope" :data="item" :index="index"></slot>

? ? </div>

? ? ? ? ? ? ? ? </template>