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>