1.在递归组件的时候需要定义name

2.配合keep-alive include exclude 可以缓存组件

3.在Vue有报错或者调试的时候可以看到组件的name

Vue3 定义 name

1.自动生成

​​<script setup>​​ 只要在​​script​​开启​​setup​​语法糖模式 单文件组件会自动根据文件名生成对应的 ​​name​​ 选项 例如 ​​Tree.vue​​ 那他的​​name​​ 就是 ​​Tree​​ 自动生成，这样做有一个​​弊端​​如果想修改​​name​​需要修改组件名称如果有地方​​import​​ 该组件需要一并修改。

2.在开启一个script用来定义name

​​优点​​ 这种方式可以随意定义name ​​弊端​​ 一个单文件组件出现两个script 会让人感到疑惑。

<template> <div></div> </template> <script lang="ts" setup> import {ref,reactive } from 'vue' </script> <script lang='ts'>  export default {     name:"XXX"  } </script> <style lang="less" scoped> </style> 复制代码


3.使用第三方插件 ​​unplugin-vue-define-options​​

安装方法   ​​npm i unplugin-vue-define-options -D​​

​​vite​​ 使用

// vite.config.ts import DefineOptions from 'unplugin-vue-define-options/vite' import Vue from '@vitejs/plugin-vue' export default defineConfig({   plugins: [Vue(), DefineOptions()], }) 复制代码


配置​​tsconfig.json​​

// tsconfig.json {   "compilerOptions": {     // ...     "types": ["unplugin-vue-define-options/macros-global" /* ... */]   } } 复制代码


使用方法 通过编译宏 ​​defineOptions​​ 添加​​name​​ 和 ​​inheritAttrs​​

<script setup lang="ts"> defineOptions({   name: 'Foo',   inheritAttrs: false, }) </script> 复制代码


4.个人想法 我想着直接在script 定义name 不好吗？

<template> <div></div> </template> <script name="xiaoman" lang="ts" setup> import {ref,reactive } from 'vue' </script> <style lang="less" scoped> </style>