PHP程序员小白到大牛集训(12期免息)
首页 >web前端 >Vue.js > 正文

聊聊vue3中的name属性,看看怎么使用!

转载2022-09-29 20:50:441250 + Vue前端学习QQ群(点击入群)
如果你在 vue3 开发中使用了 <script setup> 语法的话,对于组件的 name 属性,需要做一番额外的处理。下面本篇文章就来和大家聊聊vue3 name 属性的使用技巧,希望对大家有所帮助!

前端(vue)入门到精通课程:进入学习
API 文档、设计、调试、自动化测试一体化协作工具:点击使用

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

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

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



登录后复制

编译后输出为:



登录后复制

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

(学习视频分享:web前端开发编程基础视频

以上就是聊聊vue3中的name属性,看看怎么使用!的详细内容,更多请关注php中文网其它相关文章!

声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除

  • 相关标签:vue3 Vue vue.js
  • 程序员必备接口测试调试工具:点击使用

    Apipost = Postman + Swagger + Mock + Jmeter

    Api设计、调试、文档、自动化测试工具

    后端、前端、测试,同时在线协作,内容实时同步

    支持grpc,http,websocket,socketio,socketjs类型接口调试

    相关文章

    相关视频


    视频教程分类

    专题推荐

    官方公众号

    php中文网课程

    扫码关注官方公众号
    回复“phpcn01”领取php学习资料课程
    全套工具、电子书、脑图、内部课程等

    推荐视频教程

    开通VIP会员课 0元学

    热门推荐