• 技术文章 >web前端 >Vue.js

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

    青灯夜游青灯夜游2022-09-15 13:02:16转载488
    如果你在 vue3 开发中使用了 <script setup> 语法的话,对于组件的 name 属性,需要做一番额外的处理。下面本篇文章就来和大家聊聊vue3 name 属性的使用技巧,希望对大家有所帮助!

    大前端零基础入门到就业:进入学习

    对于 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,也就是:

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

    稍显繁琐,对此社区推出了 unplugin-vue-define-options 来简化该操作。

    使用步骤非常简单:

    1、安装

    npm i unplugin-vue-define-options -D

    2、配置 vite

    // vite.config.ts
    import DefineOptions from 'unplugin-vue-define-options/vite'
    import Vue from '@vitejs/plugin-vue'
    
    export default defineConfig({
      plugins: [Vue(), DefineOptions()],
    })

    3、使用 typescript 开发的话,需要配置 typescript 支持

    // tsconfig.json
    {
      "compilerOptions": {
        // ...
        "types": ["unplugin-vue-define-options/macros-global" /* ... */]
      }
    }

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

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

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

    对于使用了 defineOptions 的代码:

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

    编译后输出为:

    <script>
    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 这一步,简化了我们的开发。

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

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

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:vue3 Vue vue.js
    上一篇:Vue实战:利用自定义指令实现鼠标拖动元素效果 下一篇:一文聊聊Vue响应式实现原理
    VIP课程(WEB全栈开发)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• 尤雨溪:新版Vue3中文文档上线了!• 【整理总结】详解Vue3的11个知识点• 一文详解Vue3项目中怎么引入 SVG 图标• 聊聊怎么用Vue3构建Web Components• 9个vue3开发技巧,提升效率帮助你早点下班!
    1/1

    PHP中文网