聊聊vue3中的name属性，看看怎么使用！-Vue.js-PHP中文网

聊聊vue3中的name属性，看看怎么使用！

青灯夜游

发布： 2022-09-14 19:42:46

转载

4456人浏览过

如果你在 vue3 开发中使用了

聊聊vue3中的name属性，看看怎么使用！

对于 vue@3.2.34 及以上版本，在使用

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

除此之外，如果我们要在

<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中文网其它相关文章！