Instance komponenty ​

$data ​

Objekt vrácený ze sekce data, který komponenta činí reaktivní. Instance komponenty zajišťuje proxy přístup k vlastnostem na svém objektu data.

• Typ

  ts

  interface ComponentPublicInstance {
    $data: object
  }

$props ​

Objekt představující aktuální, vyřešené vlastnosti (props) komponenty.

• Typ

  ts

  interface ComponentPublicInstance {
    $props: object
  }

• Podrobnosti

  Budou zahrnuty pouze vlastnosti deklarované pomocí možnosti props. Instance komponenty zajišťuje proxy přístup k vlastnostem na svém objektu props.

$el ​

Root DOM element, který instance komponenty spravuje.

• Typ

  ts

  interface ComponentPublicInstance {
    $el: Node | undefined
  }

• Podrobnosti

  $el bude undefined až do doby, než je komponenta připojena (mounted).

  • Pro komponenty s jedním root elementem bude $el odkazovat na tento element.
  • Pro komponenty s textovým rootem bude $el odkazovat na textový element.
  • Pro komponenty s více root elementy bude $el představovat zástupný DOM element, který Vue používá k udržování pozice komponenty v DOM (textový element nebo komentářový element v režimu SSR hydratace).

  TIP

  Pro konzistenci se pro přímý přístup k elementům doporučuje používat template refs místo spoléhání na $el.

$options ​

Vyřešené možnosti (options) komponenty použité pro vytvoření aktuální instance komponenty.

• Typ

  ts

  interface ComponentPublicInstance {
    $options: ComponentOptions
  }

• Podrobnosti

  Objekt $options poskytuje vyřešené možnosti pro aktuální komponentu a je výsledkem sloučení těchto možných zdrojů:

  • Globální mixins
  • Základ extends komponenty
  • Mixins komponenty

  Obvykle se používá k podpoře custom options komponent:

  js

  const app = createApp({
    customOption: 'foo',
    created() {
      console.log(this.$options.customOption) // => 'foo'
    }
  })

• Viz také: app.config.optionMergeStrategies

$parent ​

Instance rodičovské komponenty, pokud ji aktuální instance má. Pro root instanci bude hodnota null.

• Typ

  ts

  interface ComponentPublicInstance {
    $parent: ComponentPublicInstance | null
  }

$root ​

Instance root komponenty aktuálního stromu komponent. Pokud aktuální instance nemá rodiče, bude v této hodnota odkazovat na sebe sama.

• Typ

  ts

  interface ComponentPublicInstance {
    $root: ComponentPublicInstance
  }

$slots ​

Objekt představující sloty (slots), které předala komponenta rodiče.

• Typ

  ts

  interface ComponentPublicInstance {
    $slots: { [name: string]: Slot }
  }
  
  type Slot = (...args: any[]) => VNode[]

• Podrobnosti

  Obvykle se používá při ručním vytváření funkcí pro vykreslení, ale může se také použít k detekci přítomnosti slotu.

  Každý slot je vystaven na this.$slots jako funkce, která vrací pole VNodes pod klíčem odpovídajícím názvu slotu. Výchozí slot je přístupný jako this.$slots.default.

  Pokud je to scoped slot, jsou parametry předané do slotových funkcí dostupné jako slot props.

• Viz také: Funkce pro vykreslení - Vykreslování slotů

$refs ​

Objekt DOM elementů a instancí komponent, registrovaných pomocí template refs.

• Typ

  ts

  interface ComponentPublicInstance {
    $refs: { [name: string]: Element | ComponentPublicInstance | null }
  }

• Viz také:

  • Template refs
  • Vestavěné speciální atributy - ref

$attrs ​

Objekt obsahující atributy komponentu, které se předávají dále (fallthrough atributy).

• Typ

  ts

  interface ComponentPublicInstance {
    $attrs: object
  }

• Podrobnosti

  Fallthrough atributy jsou atributy a event handlery předávané rodičovskou komponentou, které nejsou v potomkovi deklarovány jako vlastnosti (props) nebo emitované události (emits).

  Ve výchozím nastavení se všechny atributy v $attrs automaticky zdědí na root elementu komponenty, pokud je root element pouze jeden. Toto chování je vypnuto, pokud má komponenta více root elementů, a může být explicitně zakázáno pomocí volby inheritAttrs.

• Viz také:

  • Fallthrough atributy

$watch() ​

Imperativní API pro vytváření watcherů.

• Typ

  ts

  interface ComponentPublicInstance {
    $watch(
      source: string | (() => any),
      callback: WatchCallback,
      options?: WatchOptions
    ): StopHandle
  }
  
  type WatchCallback<T> = (
    value: T,
    oldValue: T,
    onCleanup: (cleanupFn: () => void) => void
  ) => void
  
  interface WatchOptions {
    immediate?: boolean // výchozí: false
    deep?: boolean // výchozí: false
    flush?: 'pre' | 'post' | 'sync' // výchozí: 'pre'
    onTrack?: (event: DebuggerEvent) => void
    onTrigger?: (event: DebuggerEvent) => void
  }
  
  type StopHandle = () => void

• Podrobnosti

  Prvním parametrem je zdroj watcheru. Může to být název vlastnosti komponenty jako řetězec, jednoduchý řetězec oddělený tečkami nebo getter funkce.

  Druhým parametrem je callback funkce. Callback dostává novou a starou hodnotu sledovaného zdroje.

  • immediate: spustit callback při okamžitě vytvoření watcheru. Stará hodnota bude při prvním volání undefined.
  • deep: vynutit hluboký (deep) průchod zdrojem, pokud je to objekt, aby se callback spustil při vnořených změnách. Viz Deep Watchers.
  • flush: upravit časování vyvolání callbacku. Viz Časování provedení callback funkce a watchEffect().
  • onTrack / onTrigger: ladit závislosti watcheru. Viz Ladění watcherů.

• Příklad

  Sledování názvu vlastnosti:

  js

  this.$watch('a', (newVal, oldVal) => {})

  Sledování cesty oddělené tečkami:

  js

  this.$watch('a.b', (newVal, oldVal) => {})

  Použití getteru pro složitější výrazy:

  js

  this.$watch(
    // pokaždé, když výraz `this.a + this.b` vrátí
    // jiný výsledek, bude zavolán handler.
    // Je to jako bychom sledovali computed proměnnou
    // bez definování ji samotné.
    () => this.a + this.b,
    (newVal, oldVal) => {}
  )

  Zastavení watcheru:

  js

  const unwatch = this.$watch('a', cb)
  
  // později...
  unwatch()

• Viz také:

  • Options - watch
  • Průvodce - Watchers

$emit() ​

Spustí vlastní událost na aktuální instanci. Jakékoli další parametry budou předány do callbacku listeneru.

• Typ

  ts

  interface ComponentPublicInstance {
    $emit(event: string, ...args: any[]): void
  }

• Příklad

  js

  export default {
    created() {
      // pouze událost
      this.$emit('foo')
      // s dalšími parametry
      this.$emit('bar', 1, 2, 3)
    }
  }

• Viz také:

  • Události komponent (Events)
  • Options - emits

$forceUpdate() ​

Vynutí překreslení instance komponenty.

• Typ

  ts

  interface ComponentPublicInstance {
    $forceUpdate(): void
  }

• Podrobnosti

  Mělo by být potřeba jen zřídka, díky plně automatickému reaktivnímu systému Vue. Jediné případy, kdy byste to mohli potřebovat, jsou ty, kdy jste explicitně vytvořili ne-reaktivní stav komponenty pomocí pokročilých funkcí Reactivity API.

$nextTick() ​

Verze metody nextTick() vázaná na instanci.

• Typ

  ts

  interface ComponentPublicInstance {
    $nextTick(callback?: (this: ComponentPublicInstance) => void): Promise<void>
  }

• Podrobnosti

  Jediný rozdíl oproti globální verzi nextTick() je, že callback předaný this.$nextTick() bude mít svůj kontext this vázaný na aktuální instanci komponenty.

• Viz také: nextTick()