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> 语法。
相关推荐
namekong816 小时前
清理谷歌浏览器垃圾文件 Chrome “User Data”
前端·chrome
开发者小天17 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
李少兄19 小时前
HTML 表单控件
前端·microsoft·html
学习笔记10120 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-194320 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧21 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台21 小时前
海龟交易系统R
前端·人工智能·r语言
歪歪10021 小时前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc1 天前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员