Vue3 组件命名

最简单的方式

无须引入插件,可直接命名(缺点,可能就是丑了)

javascript 复制代码
// 组件命名
defineOptions({name: 'Menu'})

优雅的命名方式

安装 vite-plugin-vue-setup-extend 插件

javascript 复制代码
npm i vite-plugin-vue-setup-extend -D

vite-plugin-vue-setup-extend 插件的作用

vite-plugin-vue-setup-extend 是一个 Vite 插件,它允许你在 <script setup> 语法中使用 name 属性以及其他一些特性。这个插件的主要功能包括:

  1. 支持在 <script setup> 中使用 name 属性 :这使得你可以像在传统的 <script> 标签中那样,在 <script setup> 标签内定义组件的名字。

  2. 支持在 <script setup> 中使用 inheritAttrs:这允许你控制组件是否继承父组件传递过来的未声明的属性。

  3. 支持在 <script setup> 中使用 defineEmitsdefineProps :这使得你可以在 <script setup> 中更灵活地定义组件的 props 和 emits。

配置 Vite

vite.config.js 文件中添加以下代码:

javascript 复制代码
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// 主要是这一行
import vueSetupExtend from 'vite-plugin-vue-setup-extend';

export default defineConfig({
  // 还有这一行
  plugins: [vue(), vueSetupExtend()],
});

使用示例

现在你可以使用 <script setup> 中的 name 属性了:

javascript 复制代码
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script setup name="MyComponent">
import { ref } from 'vue';

const message = ref('Hello, Vue!');
</script>

注意事项

  • 确保你的项目使用的是 Vue 3。
  • 确保你的 Vite 版本足够新,以支持这个插件。
  • 如果你使用的是 Vue CLI 创建的项目,通常不需要安装这个插件,因为 Vue CLI 通常已经支持 <script setup> 语法。
相关推荐
超人不会飛4 分钟前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦7 分钟前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想10 分钟前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
The_cute_cat11 分钟前
JavaScript的初步学习
开发语言·javascript·学习
海天胜景14 分钟前
vue3 el-table 列增加 自定义排序逻辑
javascript·vue.js·elementui
今晚打老虎z18 分钟前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户38022585982424 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴29 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干33 分钟前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗35 分钟前
【前端】HTML+JS 实现超燃小球分裂全过程
前端