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> 语法。
相关推荐
拉不动的猪20 分钟前
前端常见数组分析
前端·javascript·面试
小吕学编程37 分钟前
ES练习册
java·前端·elasticsearch
Asthenia041244 分钟前
Netty编解码器详解与实战
前端
袁煦丞1 小时前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
Mr.app1 小时前
vue mixin混入与hook
vue.js
一个专注写代码的程序媛2 小时前
vue组件间通信
前端·javascript·vue.js
一笑code2 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员2 小时前
layui时间范围
前端·javascript·layui
NoneCoder2 小时前
HTML响应式网页设计与跨平台适配
前端·html
凯哥19703 小时前
在 Uni-app 做的后台中使用 Howler.js 实现强大的音频播放功能
前端