vue3组件命名方法-不用上双标签了

秋知德雨个人 2023-7-15 1,624 7/15

Vue3 的组件,即 SFC,单文件组件。

组件的文件名推荐采用首字母大写驼峰或者字母小写连字符的方式,例如:MyComponent.vuemy-component.vue

每个 Vue3 组件,都应当设置 name 属性,这也是我们本文的重点。

name 属性的用途

组件的名字有以下几种用途:

  • 在组件自己的模板中递归引用自己时。
  • 在 Vue 开发者工具中的组件树显示时。
  • 在组件抛出的警告追踪栈信息中显示时。
  • 使用 KeepAlive,通过该属性来匹配需要缓存的组件时。

声明 name 属性

而当我们在 vue3 项目中采用组合式 API <script setup> 的写法,需要显示的声明 name 属性。

有以下几种方式来声明 name 属性:

defineOptions

vue 官方在 vue@3.3 及以上版本中推出了 defineOptions API,允许你直接在 <script setup> 中声明组件选项,无需额外的<script>标签或是第三方插件。

<script setup>
  defineOptions({ 
    name: 'MyComponent',
    inheritAttrs: false
  })
</script>
- THE END -

秋知德雨个人

7月15日21:06

最后修改:2023年7月15日
0

非特殊说明,本博所有文章均为博主原创。

共有 0 条评论