选项：其他

name

显式声明组件的显示名称。

类型

interface ComponentOptions {
  name?: string
}

详细信息
组件名称用于以下情况：
- 组件自身模板中的递归自引用
- 在 Vue DevTools 的组件检查树中显示
- 在警告组件跟踪中显示
当使用单文件组件时，组件会从文件名中推断其名称。例如，名为 MyComponent.vue 的文件将具有推断的显示名称 "MyComponent"。
另一个情况是，当组件通过 app.component 全局注册时，全局 ID 将自动设置为它的名称。
name 选项允许您覆盖推断的名称，或者在没有名称可以推断时（例如，不使用构建工具或内联非 SFC 组件）显式提供名称。
有一种情况下，name 是必须显式指定的：当通过 <KeepAlive> 的 include / exclude 属性匹配可缓存的组件时。
提示
自 3.2.34 版本以来，使用 <script setup> 的单文件组件将自动根据文件名推断其 name 选项，即使与 <KeepAlive> 一起使用，也不需要手动声明名称。

inheritAttrs

控制是否启用默认组件属性穿透行为。

类型

interface ComponentOptions {
  inheritAttrs?: boolean // default: true
}

详细信息
默认情况下，未被识别为props的父作用域属性绑定会“穿透”。这意味着当只有一个根组件时，这些绑定将作为正常HTML属性应用于子组件的根元素。当编写一个包裹目标元素或另一个组件的组件时，这不一定是我们期望的行为。通过将inheritAttrs设置为false，可以禁用这种默认行为。属性可以通过$attrs实例属性访问，并且可以使用v-bind显式绑定到非根元素。

示例

vue

<script>
export default {
  inheritAttrs: false,
  props: ['label', 'value'],
  emits: ['input']
}
</script>

<template>
  <label>
    {{ label }}
    <input
      v-bind="$attrs"
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    />
  </label>
</template>

当在一个使用<script setup>的组件中声明此选项时，可以使用defineOptions宏。

vue

<script setup>
defineProps(['label', 'value'])
defineEmits(['input'])
defineOptions({
  inheritAttrs: false
})
</script>

<template>
  <label>
    {{ label }}
    <input
      v-bind="$attrs"
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    />
  </label>
</template>

另请参阅
- 穿透属性
- 在普通<script>中使用inheritAttrs

组件

一个对象，用于注册要供组件实例使用的组件。

类型

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

示例

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

export default {
  components: {
    // shorthand
    Foo,
    // register under a different name
    RenamedBar: Bar
  }
}

另请参阅 组件注册

指令

一个对象，用于注册要供组件实例使用的指令。

类型

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

示例

export default {
  directives: {
    // enables v-focus in template
    focus: {
      mounted(el) {
        el.focus()
      }
    }
  }
}

模板

<input v-focus>

另请参阅 自定义指令

在GitHub上编辑此页面

选项：其他 ​

name ​

inheritAttrs ​

组件

指令

选项：其他

name

inheritAttrs