写点什么

vue3 name 属性的使用技巧

作者:new_cheng
  • 2022-10-28
    海南
  • 本文字数:1001 字

    阅读完需:约 3 分钟

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 来简化该操作。


使用步骤非常简单:


  1. 安装


npm i unplugin-vue-define-options -D
复制代码


  1. 配置 vite


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


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

发布于: 刚刚阅读数: 3
用户头像

new_cheng

关注

还未添加个人签名 2019-01-15 加入

还未添加个人简介

评论

发布
暂无评论
vue3 name 属性的使用技巧_Vue_new_cheng_InfoQ写作社区