关于node.js:Vue3中name有什么用呢

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>

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据