选项式 API：其他杂项选项

VueAPI 参考

选项式 API：其他杂项选项 {#options-misc}

name {#name}

用于显式声明组件展示时的名称。

类型

ts 复制代码

interface ComponentOptions {
  name?: string
}

详细信息

组件的名字有以下用途：
- 在组件自己的模板中递归引用自己时
- 在 Vue 开发者工具中的组件树显示时
- 在组件抛出的警告追踪栈信息中显示时
当你在使用单文件组件（SFC）时，组件已经可以根据其文件名推导出其名称。举例来说，一个名为 MyComponent.vue 的文件会推导出显示名称为 “MyComponent”。

另一种场景是，当一个组件通过 app.component 被全局注册时，这个全局 ID 就自动被设为了其名称。

使用 name 选项使你可以覆盖推导出的名称，或是在没有推导出名字时显式提供一个（例如没有使用构建工具时，或是一个内联的非单文件组件）。

有一种场景下 name 必须是已显式声明的：即 <KeepAlive> 通过其 include / exclude prop 来匹配其需要缓存的组件时。

:::tip 提示
在 3.2.34 或以上的版本中，使用 `
```

在一个使用了 `

```

参考

透传 attribute

在常规 <script> 中使用 inheritAttrs

components {#components}

一个对象，用于注册对当前组件实例可用的组件。

类型

ts 复制代码

interface ComponentOptions {
  components?: { [key: string]: Component }
}

示例

js 复制代码

import Foo from './Foo.vue'
import Bar from './Bar.vue'

export default {
  components: {
    // 简写
    Foo,
    // 注册为一个不同的名称
    RenamedBar: Bar
  }
}

参考

组件注册

directives {#directives}

一个对象，用于注册对当前组件实例可用的指令。

类型

ts 复制代码

interface ComponentOptions {
  directives?: { [key: string]: Directive }
}

示例

js 复制代码

export default {
  directives: {
    // 在模板中启用 v-focus
    focus: {
      mounted(el) {
        el.focus()
      }
    }
  }
}

vue-html 复制代码

<input v-focus>

参考

自定义指令

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。