Vue3.2 setup语法糖中组件的 name 属性如何定义

2023-02-28 16:49:26
214次阅读
0个评论
方法一

新增一个script标签, 在这个script标签定义一个name属性(注意多个script使用时 lang的值要一致)

<script lang="ts">
export default {
  name: 'Layout'
}
</script>
<script setup lang="ts">
</script>
 
<template>
  <div>layout</div>
</template>
 
<style lang="less" scoped></style>


方法二
使用unplugin-vue-define-options插件
① 安装插件

npm i unplugin-vue-define-options -D

 yarn add unplugin-vue-define-options -D


② 集成插件 在vite.config.ts文件引入插件unplugin-vue-define-options


import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
import DefineOptions from 'unplugin-vue-define-options/vite'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), DefineOptions()],
})


③ 集成完成之后,那么可以直接使用了,如果在TypeScript中报错了(比如在d.ts的配置文件中加入描述)


<script setup lang="ts">
  defineOptions({
    name: 'Layout'
  })
</script>
<template>
  <div>layout</div>
</template>
<style lang="less" scoped></style>


方法三
使用 vite-plugin-vue-setup-extend插件

① 安装插件

yarn add vite-plugin-vue-setup-extend -D

② 集成插件 在vite.config.ts文件引入vite-plugin-vue-setup-extend

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
 
export default defineConfig({
  plugins: [vue(), vueSetupExtend()]
})


③ .vue文件的setup中直接使用name属性 

<script setup lang="ts" name="Layout">
 
</script>
<template>
  <div>layout</div>
</template>
 
<style lang="less" scoped></style>

收藏00

登录 后评论。没有帐号? 注册 一个。