vue3在setup语法糖下声明组件name

已于 2024-05-23 17:58:54 修改
阅读量320 收藏
点赞数 3
文章标签： vue.js 前端
于 2024-05-23 17:58:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43600406/article/details/139154136
版权

组件声明name的作用：可用于缓存组件，KeepAlive组件中include属性是根据组件的name来进行缓存的。

如何声明组件name

PS:本人用的vue版本vue3.4.21,在此记录的方法只适用于vue3.3之后版本。vue3.3之前的版本需要安装额外的插件。

//vue3.3之后的版本后提供了内置API
//defineOptions
<script setup lang="ts">
defineOptions({
  name: "home",
  // ....其他选项
});
</script>
面条不爱汤
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue组件横向树实现代码
10-18
在 Vue.js 开发中，有时我们需要展示数据结构为树形的组件，但希望以横向的方式展现，这样的组件被称为横向树。本篇将详细介绍如何在 Vue 中实现一个横向树组件。 首先，让我们分析给定的代码片段。这段代码创建了...
Vue3 安装下载，基础语法
06-15
Vue3允许在一个组件中同时使用Composition API和Options API，提供了一种平滑过渡的策略。 通过上述内容，我们可以看到Vue3在安装、配置以及基础语法上都有所创新和优化。Vue3的这些改变提升了开发体验，让代码...
Vue3 如何在＜script setup＞里设置组件name属性
贤哲XianZhe的博客
11-03 8902
一般情况，在 ``语法糖下，大多数人往往将其忽略，毕竟确实很少用得上 name 属性，但如果需要用到时，却为怎么声明使用犯起了难，**即使 Vue 在默认情况下会将文件名定义为 name 属性**，但文件名是可以重复的，如出现一大堆 `index.vue` ，阁下又将如何应对呢。我们先来看看在什么场景下需要使用到 name 属性，或则说 name 属性具体能够做什么，有什么用。
Vue3 setup语法糖写法给组件添加name属性
qq_42294411的博客
04-05 1191
Vue3 setup语法糖写法给组件添加name属性
【VUE3】vue3直接在script标签上定义组件的name值，使用vite插件 vite-plugin-vue-setup-extend
F02528的博客
03-27 1130
在vue3中虽然 vite 会根据组件的文件名自动生成组件名，但是需要自定义的组件名时，​ 可以使用vite插件 vite-plugin-vue-setup-extend ​
vue3 中的name
最新发布
weixin_42498594的博客
04-07 1096
1.复制这个命令下载第三方插件： npm install vite-plugin-vue-setup-extend -D。就是在vue文件写两个script标签，第一个标签用来定义组件名，第二个用来写自己的代码。2.我们在vite.config.ts文件中引入，并调用。vue-devtools 调试工具中，显示的组见名称由组件。作用：在Vue2中，name属性用来给组件命名，方便在。好处：可看到组件名称更好的定位。来指定：是否缓存组件。的调试时追踪组件层级。
【Vue】vue3 中通过 setup 定义组件的 name 属性
m0_62719309的博客
08-22 2078
vue3 中通过 setup 定义组件的 name 属性
Vue3如何给组件命名
hollebug的博客
08-22 2984
在使用vue2时，组件命名是非常容易的，那么当我们使用vue3的setup模式时，我们该如何给组件命名呢？之前想过重新开一个script就行但是这样确实让人感觉麻烦，当仔细阅读官方文档就会发现，官方其实提供了defineOptions函数，来实现一些声明式组件的内容,那么我们就能采用以下方式来定义组件名称。
vue3:组件注册，路由自动注册
03-20
Vue3 是一款流行的前端框架，其在组件化开发方面有着出色的表现。组件是 Vue.js 应用的基础构建块，它们可以被复用，允许开发者将应用程序拆分成独立、可管理的部分。Vue3 引入了一些新特性，如Composition API，这...
初学者vue3.0语法
03-13
Composition API通过`setup()`函数提供了一个新的入口点，可以在这里声明所有组件逻辑。例如： ```javascript import { ref, computed } from 'vue' export default { setup() { const count = ref(0) // 创建...
vue3.0基础语法的练习笔记
02-07
本笔记对 Vue 3.0 的基础语法进行了实践和总结，包括 Vite 的使用、Hot Module Replacement、Dynamic Import 和 Code Splitting、Setup 函数、Ref 和 Reactive 等知识点。通过学习这些基础语法，可以更好地使用 Vue ...
Vue3——第七章（组件展示时的名称：name）
why404
01-10 1923
Vue3——第八章（组件展示时的名称：name）
Vue之组件
知识应该共享，创造才应收费
02-26 1540
本文主要介绍了组件的概念和VUE3中定义和使用组件的方法。看完本文，读者应该能了解到全局组件和局部组件的定义和使用方法以及他们之间的区别。组件具有复用性，全局组件只要定义了，处处都可以使用，而且使用很简单，但是性能不高；局部组件定义后需要注册餐能使用，而且使用起来相对麻烦，但是性能比较高。
vue3中添加name属性
Stars-yue的博客
01-29 4292
vue3中添加name属性
vue3 setup语法糖 详细使用说明
m0_67401055的博客
03-11 1789
在Vue3 中 setup 有两种表现方式： 一种是 我们常用的： <script> export default { name: 'home', setup() { return {}; }, }; </script> 还有一种是 setup 语法糖：(给组件起名字，就需要 按照原本的方式 导出了) <script> export default { name: 'home', } </script> <
vue3 - setup 中组件名 name 简写借助插件 vite-plugin-vue-setup-extend → 浏览器中 vue 插件查看组件名可自定义（而非组件文件名）
工作中遇到问题记录
02-22 996
vue3 - setup 中组件名 name 简写借助插件 vite-plugin-vue-setup-extend → 浏览器中 vue 插件查看组件名可自定义（而非组件文件名）
Vue3的setup函数中添加组件name的方法
我的米饭
03-22 4667
在使用VUE3.0的setup函数时，发现无法像2.0那样添加name，解决的方法是新增一个 script 标签: <script lang="ts"> export default { name: "xxxx", } </script> <script setup lang="ts"> // 你的业务代码 </script> 还可以直接在setup后边加name <script setup lang="ts" name="xxxx"> /
Vue3使用setup时使用name属性（自参）
xxx
03-15 9915
可以这样写，在vben-admin框架里面使用缓存路由时有效 <script setup lang="ts" name="xxx"></script> 还可以写两个script <script> export default { name: 'xxx', } </script> <script setup> // script setup logic </script> 没有一定要在script使用setup这
setup语法糖vue3组件name
08-19
在Vue 3的setup语法糖中，无法直接定义组件的名字。 在使用命名空间组件时，必须满足两个前提条件：一是项目必须是Vue 3 TypeScript项目，二是必须使用setup语法糖的格式，这样只需要通过导入即可使用，无需再使用components进行声明。 注意，仅在Vue 3 TypeScript项目中才支持命名空间组件的使用，而在其他Vue 3项目中可能无法正常工作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue3中setup语法糖下定义组件的name属性](https://blog.csdn.net/weixin_54167801/article/details/125095234)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [【vue3】setup语法糖 - 命名空间组件](https://blog.csdn.net/weixin_41897680/article/details/124683902)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

面条不爱汤

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值