Vue3中的组件的name名

1、vue2中的组件名

我们学过Vue2同学们应该知道,在Vue2中我们的每个组件都有自己的一个name名。

作用:在Vue2中,name属性用来给组件命名,方便在开发者工具的调试时追踪组件层级

javascript 复制代码
<template>
  <div class="Name">
  </div>
</template>
<script>
export default {
  name: "Name",
  data(){
    return{}
  }
};
</script>
2、Vue3中的组件名

随着Vue3慢慢的替代Vue2,Vue3语法根Vue2的语法有很大的改变。

在公司中,也有一部分创建组件的时候,都是清一色的index.vue的文件,外面包裹这个该组件的定义名字的文件夹。

这样有些时候会导致开发者在调试时追踪组件层级的时候不变,所以就需要用到组将名。

我给大家介绍两种写法:

第一种写法:

就是在vue文件写两个script标签,第一个标签用来定义组件名,第二个用来写自己的代码。

这种写法解决了组件名的问题,但是看起来很不舒服。

javascript 复制代码
<template>
    <div class='Home'>
    </div>
</template>

<script lang="ts">
export default {
    name: 'Home'
}
</script>

<script setup lang="ts">
import {ref} from 'vue'

</script>

第二种写法:

1、第一步

javascript 复制代码
复制这个命令下载第三方插件:    npm install vite-plugin-vue-setup-extend -D

2、第二步

我们在vite.config.ts文件中引入,并调用。

3、第三步


改成Preson123,也会随着改变。

总结:

在Vue2和Vue3中,`name`选项的作用是一样的,都是用来给组件命名。它们都可以在开发者工具的调试时追踪组件层级,并且在一些插件和库中可能会使用到组件的名称。

然而,在上述代码示例中,Vue2和Vue3的写法有所不同。在Vue2中,`name`属性直接定义在组件的导出对象中。而在Vue3中,通过`<script setup>`语法,我们可以在同一个`<script>`标签中同时编写组件的选项和逻辑。

所以,尽管Vue2和Vue3中的`name`选项的作用是一样的,但是在写法上存在一些差异。在Vue2中是直接在导出对象中定义`name`属性,而在Vue3中是在`<script setup>`中定义组件的选项,包括`name`。

相关推荐
DoraBigHead9 分钟前
this 的前世今生:谁在叫我,我听谁的
前端·javascript·面试
蓝婷儿1 小时前
每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践
前端
琹箐1 小时前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠1 小时前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农1 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
kymjs张涛1 小时前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵1 小时前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian6222 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失9492 小时前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端
唐叔在学习2 小时前
不用装插件!3轮对话,我用油猴脚本+AI复刻了掘金闪念笔记,真香!
javascript·浏览器