Vue3 + vite + Ts + pinia + 实战 + 源码 +elec

借助插件vite-plugin-vue-setup-extend，可以直接在script标签上定义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>