当前位置: 首页 > news >正文

.vue文件中组件名称的设置,<script>标签的 name 属性说明

在Vue 3的<script setup>语法中,直接使用name属性而不报错的原因是项目配置了第三方插件(如vite-plugin-vue-setup-extendunplugin-vue-define-options。这些插件允许在<script setup>标签上直接定义name属性,并在编译阶段将其注入为组件的选项。

详细解释:

  1. 传统写法

    • 单独的<script>块定义:

      vue

      <script lang="ts">
      export default { name: "ProgressCtrl" };
      </script>
  2. 第三方插件的作用

    • 插件如vite-plugin-vue-setup-extend扩展了Vue SFC的编译逻辑,允许在<script setup>标签上添加name属性:

      vue

      <script setup lang="ts" name="Home">
      // ...
      </script>
    • 编译时,插件会将name提取并自动生成defineOptions调用,等效于显式使用defineOptions

  3. 为何不报错

    • 如果没有插件,Vue编译器会忽略未知属性(如name),但不会自动处理为组件选项,可能导致name未生效。

    • 配置插件后,插件在编译阶段识别name属性并注入组件选项,因此不会报错且name生效。

验证与解决方案:

  • 检查项目配置:查看vite.config.ts或类似文件是否包含类似插件:

    typescript

    import vueSetupExtend from 'vite-plugin-vue-setup-extend';
    
    export default {
      plugins: [vue(), vueSetupExtend()]
    };
  • 替代方案:若不想用插件,改用defineOptions或单独<script>块定义name

总结:

<script setup>中直接写name属性不报错,是因为插件在编译阶段处理了这一特性,将其转换为合法的组件选项。这是对Vue SFC编译流程的扩展,并非Vue原生支持的功能。

1. <script setup> 语法

这是 Vue 3 的 Composition API 语法糖,特点:

  • 更简洁的代码组织方式。

  • 顶层绑定(变量、函数等)自动暴露给模板。

  • 默认无法直接配置组件选项(如 nameinheritAttrs 等),需借助工具。


2. defineOptions 函数

  • 作用:在 <script setup> 中定义组件选项(如 nameinheritAttrs 等)。

  • 来源:它不是 Vue 核心 API,通常由插件(如 unplugin-vue-define-options 或 vite-plugin-vue-setup-extend)提供。

  • 编译时处理:构建工具会在编译阶段将选项注入组件。


3. 代码含义

javascript

复制

defineOptions({
  name: 'Home'
});
  • 设置当前组件的 name 选项为 'Home'

  • name 的作用:

    • 递归组件:组件内部调用自身时需命名。

    • 开发者工具:在 Vue Devtools 中显示组件名称。

    • <keep-alive> 缓存:通过 include/exclude 匹配组件名。


4. 对比传统写法

没有 <script setup> 时,需这样写:

vue

复制

<script>
export default {
  name: 'Home',
  setup() {
    // 逻辑
  }
}
</script>

而 <script setup> + defineOptions 更简洁,适合组合式 API。


5. 注意事项

  • 插件依赖:确保项目配置了支持 defineOptions 的插件(如 Vite 项目中安装 unplugin-vue-define-options)。

  • 版本兼容:Vue 3.3+ 已实验性支持 defineOptions,未来可能成为标准。


总结

这段代码通过 defineOptions 为 Vue 组件设置了名称 'Home',解决了 <script setup> 无法直接配置选项的限制,依赖构建插件实现,使代码更简洁且符合组合式 API 风格。

操作示例:

需要指定组件名显示为 ProgressCtrl(目前是显示 progress-ctrl ,程序也不报错)

<script setup lang="ts" name="ProgressCtrl">

.vue文件的文件名与组件名不一样

1、按传统写法,增加一个

<script lang="ts">

export default { name: "ProgressCtrl" };

</script>

用来定义组件名称

原来的 <script setup lang="ts" name="progress-ctrl"> 去掉 name 属性

<script lang="ts">
export default { name: "ProgressCtrl" };
</script>
<script setup lang="ts">
import ProgressCtrlTree from "./progress-ctrl/comps/progress-ctrl-tree.vue";
import ProgressCtrlSearch from "./progress-ctrl/comps/progress-ctrl-search.vue";
import ProgressCtrlMain from "./progress-ctrl/comps/progress-ctrl-main.vue";
import ProgressCtrlTabs from "./progress-ctrl/comps/progress-ctrl-tabs.vue";
import ProgressCtrlPagination from "./progress-ctrl/comps/progress-ctrl-pagination.vue";
import useProgressCtrlStore from "./progress-ctrl/stores";
import { onMounted } from "vue";

const progressCtrlStore = useProgressCtrlStore();

onMounted(() => {
  // 初始化Store
  progressCtrlStore.$reset();
});
</script>

运行效果: 

2、安装插件

2.1、安装

npm i vite-plugin-vue-setup-extend -D

2.2、设置,打开vite.config.ts

import VueSetupExtend from "vite-plugin-vue-setup-extend";
plugins: [vue(), VueSetupExtend()],

vite.config.ts 完整代码 

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import VueSetupExtend from "vite-plugin-vue-setup-extend";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), VueSetupExtend()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    }
  },
  server: {
    // 指定端口,vite默认 5173
    port: 5173,
    // 指定服务器监听的 IP 地址,如果将此设置为 0.0.0.0 或者 true 将监听所有地址
    host: "0.0.0.0",
    proxy: {
      // 【代理1】获取路径中包含有 /api 的请求
      "/api": {
        // 后台服务所在的源
        target: "http://localhost:8080",
        // 修改源
        changeOrigin: true,
        // 将 api 替换为 ''
        rewrite: (path) => path.replace(/^\/api/, "")
      },
      // 【代理2】获取路径中包含有 /apu 的请求,【上传数据】用于前端网面对外请求发送数据
      "/apu": {
        // 后台服务所在的源
        target: "http://localhost:8081",
        // 修改源
        changeOrigin: true,
        // 将 apu 替换为 ''
        rewrite: (path) => path.replace(/^\/apu/, "")
      }
    }
  }
});

 2.3、在<script setup>设置组件名称

<script setup lang="ts" name="ProgressCtrl">

运行效果: 

http://www.dtcms.com/a/122179.html

相关文章:

  • JS—浏览器的缓存策略:3分钟精通浏览器缓存策略
  • Vue3中watch监视reactive对象方法详解
  • Java 设计模式:单例模式详解
  • 【算法笔记】并查集详解
  • 蚂蚁 Flink 实时计算编译任务 Koupleless 架构改造
  • 2025年港口危货储存单位主要安全管理人员备考练习题
  • JVM 不同的垃圾收集算法分别有什么优缺点?
  • 【AI】MCP概念
  • 安全理念和安全产品发展史
  • 整合线下资源视角下定制开发开源AI智能名片S2B2C商城小程序的应用研究
  • git 如何彻底删除已经提交到远程仓库的文件?而不是覆盖删除?git 如何删除已经提交到本地的文件?从历史记录中彻底清除彻底删除(本地+远程)
  • 汽车的四大工艺
  • TDengine 语言连接器(Python )
  • 达摩院Paraformer-ONNX模型:一站式高精度中文语音识别工业级解决方案
  • 物联网与边缘计算之物联网架构(感知层、网络层、应用层)
  • 什么是堆?深入理解堆数据结构及其应用
  • SSM智能停车场管理系统
  • 基于OpenCV的图像处理程序设计实践
  • dify使用知识库
  • 机器学习02——概要
  • Ansible的使用
  • Java面试黄金宝典44
  • Yalmip工具箱(3)——错误类型
  • SHAP 能帮我们精准看穿预测模型的因果关系吗?
  • NO.81十六届蓝桥杯备战|数据结构-Trie树-字典树-前缀树|于是他错误的点名开始了|最大异或对 The XOR Largest Pair(C++)
  • 汽车售后诊断 ODX 和 OTX 对比分析报告
  • JSX 中,`style` 和 `className` 是两种不同的样式控制方式
  • ctfshow——web入门186~190
  • Feign修仙指南:声明式HTTP请求的优雅之道
  • Java中23种设计模式之代理模式