Options API: Ostatní ​

name ​

Explicitně deklaruje zobrazované jméno komponenty.

• Typ

  ts

  interface ComponentOptions {
    name?: string
  }

• Detaily

  Jméno komponenty se používá v následujících situacích:

  • Rekurzivní odkaz na sebe sama v šabloně komponenty
  • Zobrazení v inspekčním stromu komponent v nástroji Vue DevTools
  • Zobrazení v traces ve varováních komponent

  Pokud používáte Single-File komponenty (SFC), komponenta již automaticky odvozuje své jméno z názvu souboru. Například soubor pojmenovaný MyComponent.vue bude mít odvozené zobrazované jméno „MyComponent“.

  Další případ je, když je komponenta globálně registrována pomocí app.component, globální ID je automaticky nastaveno jako její jméno.

  Možnost name vám umožňuje přepsat odvozené jméno nebo jméno explicitně poskytnout, pokud nelze žádné odvodit (například když nejsou použity build nástroje nebo ve vložené komponentě, která není ve formátu SFC).

  Existuje jedna situace, kdy je name explicitně nutné: při porovnávání s cachovatelnými komponentami v <KeepAlive> prostřednictvím jeho vlastností include / exclude.

  TIP

  Od verze 3.2.34 si komponenta ve formátu SFC s použitím <script setup> automaticky odvodí vlastnost name na základě názvu souboru, což odstraňuje potřebu ručně deklarovat jméno i při použití s <KeepAlive>.

inheritAttrs ​

Ovládá, zda má být povoleno výchozí chování pro předávání atributů komponenty.

• Typ

  ts

  interface ComponentOptions {
    inheritAttrs?: boolean // výchozí: true
  }

• Detaily

  Ve výchozím nastavení se vazby na atributy z rodičovského scope, které nejsou rozpoznány jako vlastnosti (props), „propadnou“ (fallthrough). To znamená, že pokud máme komponentu s jediným root elementem, tyto vazby budou aplikovány na root element potomka jako běžné HTML atributy. Při tvorbě komponenty, která obaluje cílový prvek nebo jinou komponentu, to nemusí být vždy žádoucí chování. Nastavením inheritAttrs na false lze toto výchozí chování zakázat. Atributy jsou dostupné pomocí vlastnosti instance $attrs a lze je explicitně vázat na non-root element pomocí v-bind.

• Příklad

  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>

  Při deklarování této možnosti v komponentě, která používá <script setup>, můžete použít makro 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>

• Viz také:

  • Fallthrough atributy
  • Použití inheritAttrs společně s normálním <script>

components ​

Objekt, který registruje komponenty, které budou dostupné na instanci komponenty.

• Typ

  ts

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

• Příklad

  js

  import Foo from './Foo.vue'
  import Bar from './Bar.vue'
  
  export default {
    components: {
      // zkrácený zápis
      Foo,
      // registrovat pod jiným jménem
      RenamedBar: Bar
    }
  }

• Viz také: Registrace komponent

directives ​

Objekt, který registruje direktivy, které budou dostupné na instanci komponenty.

• Typ

  ts

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

• Příklad

  js

  export default {
    directives: {
      // umožňuje použití v-focus v šabloně
      focus: {
        mounted(el) {
          el.focus()
        }
      }
    }
  }

  template

  <input v-focus>

• Viz také Vlastní direktivy