Component Instance ​

$data ​

Obiekt zwrócony z opcji data, jest tworzony jako reaktywny przez komponent. Instancja komponentu pośredniczy w dostępie do właściwości swojego obiektu danych.

• Typ

  ts

  interface ComponentPublicInstance {
    $data: object
  }

$props ​

Obiekt reprezentujący bieżące, rozwiązane rekwizyty komponentu.

• Typ

  ts

  interface ComponentPublicInstance {
    $props: object
  }

• Szczegóły

  Tylko zadeklarowane propsy za pomocą opcji props zostaną uwzględnione. Instancja komponentu pośredniczy w dostępie do właściwości na swoim obiekcie props.

$el ​

Główny węzeł DOM, którym zarządza instancja komponentu.

• Typ

  ts

  interface ComponentPublicInstance {
    $el: any
  }

• Szczegóły

  $el będzie undefined dopóki komponent nie zostanie zamontowany.

  • Dla komponentów z pojedynczym elementem głównym, $el będzie wskazywał na ten element.
  • Dla komponentów z korzeniem tekstowym, $el będzie wskazywał na węzeł tekstowy.
  • W przypadku komponentów z wieloma węzłami głównymi, $el będzie zastępczym węzłem DOM, którego Vue używa do śledzenia pozycji komponentu w DOM (węzeł tekstowy lub węzeł komentarza w trybie SSR hydration).

  TIP

  Dla zachowania spójności zaleca się używanie template refs do bezpośredniego dostępu do elementów zamiast polegania na $el.

$options ​

Rozwiązane opcje komponentu użyte do utworzenia instancji bieżącego komponentu.

• Typ

  ts

  interface ComponentPublicInstance {
    $options: ComponentOptions
  }

• Szczegóły

  Obiekt $options eksponuje rozwiązane opcje dla bieżącego komponentu i jest wynikiem połączenia tych możliwych źródeł:

  • Globalne mixiny
  • Komponent rozszerza bazę
  • Mieszanki komponentów

  Jest zwykle używany do obsługi niestandardowych opcji komponentów:

  js

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

• Zobacz również app.config.optionMergeStrategies

$parent ​

Instancja nadrzędna, jeśli bieżąca instancja ją posiada. Będzie to null dla samej głównej instancji.

• Typ

  ts

  interface ComponentPublicInstance {
    $parent: ComponentPublicInstance | null
  }

$root ​

Główna instancja komponentu bieżącego drzewa komponentów. Jeśli bieżąca instancja nie ma rodziców, wartością tą będzie ona sama.

• Typ

  ts

  interface ComponentPublicInstance {
    $root: ComponentPublicInstance
  }

$slots ​

Obiekt reprezentujący sloty przekazane przez komponent nadrzędny.

• Typ

  ts

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

• Szczegóły

  Zwykle używane podczas ręcznego tworzenia funkcji renderowania, ale może być również używane do wykrywania obecności slotu.

  Każdy slot jest udostępniany w this.$slots jako funkcja, która zwraca tablicę vnode pod kluczem odpowiadającym nazwie tego slotu. Domyślny slot jest udostępniany jako this.$slots.default.

  Jeśli slot jest slotem o zakresie, argumenty przekazywane do funkcji slotu są dostępne dla slotu jako jego właściwości slotu.

• Zobacz również Render Functions - Rendering Slots

$refs ​

Obiekt elementów DOM i wystąpień komponentów, zarejestrowany za pomocą odniesień do szablonów.

• Typ

  ts

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

• Zobacz również

  • Template refs
  • Special Attributes - ref

$attrs ​

Obiekt zawierający atrybuty przejścia komponentu.

• Type

  ts

  interface ComponentPublicInstance {
    $attrs: object
  }

• Szczegóły

  Fallthrough Attributes to atrybuty i procedury obsługi zdarzeń przekazywane przez komponent nadrzędny, ale niezadeklarowane jako rekwizyt lub zdarzenie emitowane przez komponent podrzędny.

  Domyślnie wszystko w $attrs zostanie automatycznie odziedziczone w elemencie głównym komponentu, jeśli istnieje tylko jeden element główny. To zachowanie jest wyłączone, jeśli komponent ma wiele węzłów głównych i można je jawnie wyłączyć za pomocą opcji inheritAttrs.

• Zobacz również

  • Fallthrough Attributes

$watch() ​

Imperative API do tworzenia watchers.

• Type

  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 // default: false
    deep?: boolean // default: false
    flush?: 'pre' | 'post' | 'sync' // default: 'pre'
    onTrack?: (event: DebuggerEvent) => void
    onTrigger?: (event: DebuggerEvent) => void
  }
  
  type StopHandle = () => void

• Szczegóły

  Pierwszy argument to źródło obserwowane. Może to być ciąg nazwy właściwości komponentu, prosty ciąg ścieżki rozdzielony kropkami lub funkcja gettera.

  Drugi argument to funkcja wywołania zwrotnego. Wywołanie zwrotne otrzymuje nową wartość i starą wartość obserwowanego źródła.

  • immediate: natychmiastowe wywołanie zwrotne po utworzeniu obserwatora. Stara wartość będzie undefined przy pierwszym wywołaniu.
  • deep: wymusza głębokie przejście źródła, jeśli jest obiektem, tak aby wywołanie zwrotne było uruchamiane przy głębokich mutacjach. Zobacz Deep Watchers.
  • flush: dostosowanie czasu opróżniania wywołania zwrotnego. Zobacz Callback Flush Timing i watchEffect().
  • onTrack / onTrigger: debugowanie zależności obserwatora. Zobacz Watcher Debugging.

• Przykład

  Obserwuje nazwę wartości:

  js

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

  Obserwuje ścieżkę rozdzieloną kropkami:

  js

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

  Użycie gettera do bardziej złożonych wyrażeń:

  js

  this.$watch(
    // every time the expression `this.a + this.b` yields
    // a different result, the handler will be called.
    // It's as if we were watching a computed property
    // without defining the computed property itself.
    () => this.a + this.b,
    (newVal, oldVal) => {}
  )

  Zatrzymanie obserwatora:

  js

  const unwatch = this.$watch('a', cb)
  
  // later...
  unwatch()

• Zobacz również

  • Options - watch
  • Guide - Watchers

$emit() ​

Wywoła niestandardowe zdarzenie na bieżącej instancji. Wszelkie dodatkowe argumenty zostaną przekazane do funkcji wywołania zwrotnego słuchacza.

• Typ

  ts

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

• Przykład

  js

  export default {
    created() {
      // tylko wydarzenie
      this.$emit('foo')
      // z dodatkowymi argumentami
      this.$emit('bar', 1, 2, 3)
    }
  }

• Zobacz również

  • Component - Events
  • emits option

$forceUpdate() ​

Wymusi ponowne renderowanie instancji komponentu.

• Typ

  ts

  interface ComponentPublicInstance {
    $forceUpdate(): void
  }

• Szczegóły

  Powinno to być rzadko potrzebne, biorąc pod uwagę w pełni automatyczny system reaktywności Vue. Jedynymi przypadkami, w których może być potrzebne, jest jawne utworzenie niereaktywnego stanu komponentu przy użyciu zaawansowanych interfejsów API reaktywności.

$nextTick() ​

Wersja globalna nextTick() powiązana z instancją.

• Typ

  ts

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

• Szczegóły

  Jedyną różnicą w stosunku do globalnej wersji nextTick() jest to, że wywołanie zwrotne przekazane do this.$nextTick() będzie miało swój kontekst this powiązany z bieżącą instancją komponentu.

• Zobacz również nextTick()