Vue.js (original) (raw)

Options: Misc ​

name ​

Explicitly declare a display name for the component.

• Type
  ts

interface ComponentOptions {  
  name?: string  
}  

• Details
  The name of a component is used for the following:
  • Recursive self-reference in the component's own template
  • Display in Vue DevTools' component inspection tree
  • Display in warning component traces
    When you use Single-File Components, the component already infers its own name from the filename. For example, a file named MyComponent.vue will have the inferred display name "MyComponent".
    Another case is that when a component is registered globally with app.component, the global ID is automatically set as its name.
    The name option allows you to override the inferred name, or to explicitly provide a name when no name can be inferred (e.g. when not using build tools, or an inlined non-SFC component).
    There is one case where name is explicitly necessary: when matching against cacheable components in via its include / exclude props.
    TIP
    Since version 3.2.34, a single-file component using <script setup> will automatically infer its name option based on the filename, removing the need to manually declare the name even when used with <KeepAlive>.

inheritAttrs ​

Controls whether the default component attribute fallthrough behavior should be enabled.

• Type
  ts

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

• Details
  By default, parent scope attribute bindings that are not recognized as props will "fallthrough". This means that when we have a single-root component, these bindings will be applied to the root element of the child component as normal HTML attributes. When authoring a component that wraps a target element or another component, this may not always be the desired behavior. By setting inheritAttrs to false, this default behavior can be disabled. The attributes are available via the $attrs instance property and can be explicitly bound to a non-root element using v-bind.
• Example
  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>  

When declaring this option in a component that uses <script setup>, you can use the defineOptions macro:
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>  

• See also
  • Fallthrough Attributes
  • Using inheritAttrs in normal