脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3 name 属性使用

vue3 name 属性的使用技巧详解

 更新时间：2022年09月14日 11:30:09   作者：new_cheng  
这篇文章主要为大家介绍了vue3 name 属性的使用技巧详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

引言

如果你在 vue3 开发中使用了 <script setup> 语法的话，对于组件的 name 属性，需要做一番额外的处理。

对于 vue@3.2.34 及以上版本，在使用 <script setup> 的单文件组件时，vue 会根据组件文件名，自动推导出 name 属性。也就是名为 MyComponent.vue 或 my-component.vue 的文件， name 属性为 MyComponent，而当你在组件内显示定义 name 属性时，会覆盖推导出的名称。

组件的 name 属性不仅能用于 <KeepAlive>，而且在使用 vuejs-devtools 插件调试代码的时候，对应组件也能显示出其 name 属性，方便我们快速定位代码和调试。显示的定义 name 属性，是一个好习惯。

除此之外，如果我们要在 <script setup> 显示定义 name 属性，需要额外添加一个 script，也就是：

<script>
  export default {
    name: "MyComponent"
  }
</script>
<script setup lang="ts">
...
<script>

稍显繁琐，对此社区推出了 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()],
})
  • 使用 typescript 开发的话，需要配置 typescript 支持
// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["unplugin-vue-define-options/macros-global" /* ... */]
  }
}

安装配置完成后，就能使用其提供的 defineOptions API 来定义 name 属性。

<script setup lang="ts">
defineOptions({
  name: "MyComponent"  
})
<script>

那么它是如何做到这一点的呢？

对于使用了 defineOptions 的代码：

<script setup lang="ts">
import { useSlots } from 'vue'
defineOptions({
  name: 'Foo',
  inheritAttrs: false,
})
const slots = useSlots()
</script>

编译后输出为：

<script lang="ts">
export default {
  name: 'Foo',
  inheritAttrs: false,
  props: {
    msg: { type: String, default: 'bar' },
  },
  emits: ['change', 'update'],
}
</script>
<script setup>
const slots = useSlots()
</script>

可以发现，这和我们在上文中书写 2 个 script 标签是一样的，也就是说，unplugin-vue-define-options 通过 vite 插件的方式，在编译阶段帮我们做了编写 2 个 script 这一步，简化了我们的开发。

以上就是vue3 name 属性的使用技巧详解的详细内容，更多关于vue3 name 属性使用的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 使用webpack打包后的vue项目如何正确运行（express）

    使用webpack打包后的vue项目如何正确运行（express）

    这篇文章主要介绍了使用webpack打包后的vue项目如何正确运行（express） ,接下来通过本文给大家详细介绍，需要的朋友可以参考下
    2018-10-10
  • vue组件中使用props传递数据的实例详解

    vue组件中使用props传递数据的实例详解

    这篇文章主要介绍了vue组件中使用props传递数据的实例详解,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2018-04-04
  • elementUI多选框反选的实现代码

    elementUI多选框反选的实现代码

    这篇文章主要介绍了elementUI多选框反选的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue3 reactive函数用法实战教程

    vue3 reactive函数用法实战教程

    reactive是Vue3中提供实现响应式数据的方法，reactive的用法与ref的用法相似，也是将数据变成响应式数据，当数据发生变化时UI也会自动更新，这篇文章主要介绍了vue3 reactive函数用法,需要的朋友可以参考下
    2022-11-11
  • Vue响应式原理的示例详解

    Vue响应式原理的示例详解

    Vue 最独特的特性之一，是非侵入式的响应系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。本文将通过示例详解Vue的响应式原理，感兴趣的可以了解一下
    2022-03-03
  • vue 指定文字高亮的实现示例

    vue 指定文字高亮的实现示例

    在做文字处理的项目时经常会遇到搜索文字并高亮的需求,本文就来介绍vue 指定文字高亮的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • Vue2项目中Mock.js的完整集成与使用教程

    Vue2项目中Mock.js的完整集成与使用教程

    Mock.js 是一个可以在开发阶段模拟后端数据接口的 JavaScript 库,它能够生成大量不同类型的随机数据,并且模拟真实的接口返回,允许前端开发在没有真实后端接口的情况下进行开发,本文给大家介绍了Vue2项目中Mock.js的完整集成与使用教程,需要的朋友可以参考下
    2025-02-02
  • Vue侦测相关api的实现方法

    Vue侦测相关api的实现方法

    这篇文章主要介绍了Vue侦测相关api，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue操作dom元素的3种方法示例

    vue操作dom元素的3种方法示例

    这篇文章主要给大家介绍了关于vue操作dom元素的3种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • vue项目创建并引入饿了么elementUI组件的步骤

    vue项目创建并引入饿了么elementUI组件的步骤

    这篇文章主要介绍了vue项目创建并引入饿了么elementUI组件的步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04

最新评论