Misc
name
Type:
string-
Details:
Allow the component to recursively invoke itself in its template. Note that when a component is registered globally with
app.component, the global ID is automatically set as its name.Another benefit of specifying a
nameoption is debugging. Named components result in more helpful warning messages. Also, when inspecting an app in the vue-devtools (opens new window), unnamed components will show up as<AnonymousComponent>, which isn't very informative. By providing thenameoption, you will get a much more informative component tree.
inheritAttrs
Type:
booleanDefault:
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
inheritAttrstofalse, this default behavior can be disabled. The attributes are available via the$attrsinstance property and can be explicitly bound to a non-root element usingv-bind. -
Usage:
app.component('base-input', { inheritAttrs: false, props: ['label', 'value'], emits: ['input'], template: ` <label> {{ label }} <input v-bind="$attrs" v-bind:value="value" v-on:input="$emit('input', $event.target.value)" > </label> ` }) See also: Disabling Attribute Inheritance
compilerOptions 3.1+
Type:
Object-
Details:
This is the component-level equivalent of the app-level
compilerOptionsconfig. -
Usage:
const Foo = { // ... compilerOptions: { delimiters: ['${', '}'], comments: true } }ImportantSimilar to the app-level
compilerOptionsconfig, this option is only respected when using the full build with in-browser template compilation.
delimiters deprecated
Deprecated in 3.1.0. Use compilerOptions.delimiters instead.
© 2013–present Yuxi Evan You
Licensed under the MIT License.
https://v3.vuejs.org/api/options-misc.html