Vue3 在 setup 中如何定义组件的 name 属性
方法一 新增一个script标签, 在这个script标签定义一个name属性(注意多个script使用时 lang的值要一致)<script lang="ts">export default {name: 'Layout'}</script><script setup lang="ts"></script><template><d
·
方法一 新增一个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
插件
① 安装插件 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>
更多推荐
已为社区贡献8条内容
所有评论(0)