# 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 name option 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 the name option, you will get a much more informative component tree.

# inheritAttrs

  • Type: 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.

  • 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>
      `
    })
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
  • See also: Disabling Attribute Inheritance

# compilerOptions 3.1+

  • Type: Object

  • Details:

    This is the component-level equivalent of the app-level compilerOptions config.

  • Usage:

    const Foo = {
      // ...
      compilerOptions: {
        delimiters: ['${', '}'],
        comments: true
      }
    }
    
    1
    2
    3
    4
    5
    6
    7

    Important

    Similar to the app-level compilerOptions config, 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.

Deployed on Netlify.
Last updated: 2021-06-07, 16:49:31 UTC