Vue3中的组件的name名-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3中的组件的name名。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、vue2中的组件名

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

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

<template>
  <div class="Name">
  </div>
</template>
<script>
export default {
  name: "Name",
  data(){
    return{}
  }
};
</script>

2、Vue3中的组件名

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

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

Vue3中的组件的name名,前端,遇到问题,# Vue2&Vue3,vue.js,前端,javascript

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

我给大家介绍两种写法：

第一种写法：

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

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

<template>
    <div class='Home'>
    </div>
</template>

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

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

</script>

第二种写法：

1、第一步

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

2、第二步

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

Vue3中的组件的name名,前端,遇到问题,# Vue2&Vue3,vue.js,前端,javascript

3、第三步

Vue3中的组件的name名,前端,遇到问题,# Vue2&Vue3,vue.js,前端,javascript

改成Preson123，也会随着改变。
Vue3中的组件的name名,前端,遇到问题,# Vue2&Vue3,vue.js,前端,javascript

总结：

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

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

        所以，尽管Vue2和Vue3中的`name`选项的作用是一样的，但是在写法上存在一些差异。在Vue2中是直接在导出对象中定义`name`属性，而在Vue3中是在`<script setup>`中定义组件的选项，包括`name`。文章来源地址https://www.toymoban.com/news/detail-784113.html

到了这里，关于Vue3中的组件的name名的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！