Instância do Componente ​

$data ​

O objeto retornado a partir da opção data, tornado reativo pelo componente. A instância do componente delega o acesso às propriedades sobre o seu objeto de dados.

• Tipo

  ts

  interface ComponentPublicInstance {  $data: object }

$props ​

Um objeto que representa as propriedades atuais e resolvidas do componente.

• Tipo

  ts

  interface ComponentPublicInstance {  $props: object }

• Detalhes

  Apenas as propriedades declarados através da opção props serão incluídas. A instância do componente delega o acesso às propriedades sobre o seu objeto de propriedades.

$el ​

O nó de DOM de raiz que a instância do componente está gerir.

• Tipo

  ts

  interface ComponentPublicInstance {  $el: Node | undefined }

• Detalhes

  $el será undefined até o component ser montado.

  • Para componentes com um único elemento de raiz, $el apontará para este elemento.
  • Para componentes com raiz de texto, $el apontará para o nó de texto.
  • Para componentes com vários nós de raiz, $el será o nó de DOM de espaço reservado que a Vue usa para continuar a rastrear a posição do componente no DOM (um nó de texto ou um nó de comentário no modo de hidratação da interpretação no lado do servidor).

  DICA

  Por questões consistência, é recomendado usar referências de modelo de marcação para o acesso direto aos elementos em vez de depender de $el.

$options ​

As opções de componente resolvidas usadas para instanciar a instância do componente atual.

• Tipo

  ts

  interface ComponentPublicInstance {  $options: ComponentOptions }

• Detalhes

  O objeto $options expõe as opções resolvidas para o componente atual e é o resultado da combinação destas possíveis fontes:

  • Misturas globais
  • Base de extends do componente
  • Misturas do componente

  É normalmente usado para suportar opções de componente personalizadas:

  js

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

• Consulte também: app.config.optionMergeStrategies

$parent ​

A instância pai, se a instância atual tiver uma. Será null para a própria instância de raiz.

• Tipo

  ts

  interface ComponentPublicInstance {  $parent: ComponentPublicInstance | null }

$root ​

A instância do componente de raiz da árvore do componente atual. Se a instância atual não tiver pais, este valor será ele próprio.

• Tipo

  ts

  interface ComponentPublicInstance {  $root: ComponentPublicInstance }

$slots ​

Um objeto que representa as ranhuras passadas pelo componente pai.

• Tipo

  ts

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

• Detalhes

  Normalmente usada quando escrevemos manualmente funções de interpretação, mas também pode ser usada para detetar se uma ranhura está presente.

  Cada ranhura é exposta sobre this.$slots como uma função que retorna um vetor de nós virtuais sob a chave correspondendo ao nome daquela ranhura. A ranhura padrão é exposta como this.$slots.default.

  Se uma ranhura for uma ranhura isolada, os argumentos passados às funções da ranhura estão disponíveis à ranhura como suas propriedades de ranhura.

• Consulte também: Funções de Interpretação - Interpretação de Ranhuras

$refs ​

Um objeto de elementos de DOM e as instâncias de componente, registadas através das referências do modelo de marcação.

• Tipo

  ts

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

• Consulte também:

  • Referências do Modelo de Marcação
  • Atributos Especiais - ref

$attrs ​

Um objeto que contém os atributos de passagem do componente.

• Tipo

  ts

  interface ComponentPublicInstance {  $attrs: object }

• Detalhes

  Atributos de Passagem são atributos e manipuladores de eventos passados ​​pelo componente pai, mas não declarados como uma propriedade ou um evento emitido pelo filho.

  Por padrão, tudo na $attrs será herdado automaticamente no elemento de raiz do componente se houver apenas um único elemento de raiz. Este comportamento é desativado se o componente tiver vários nós de raiz e pode ser explicitamente desativado com a opção inheritAttrs.

• Consulte também:

  • Atributos de Passagem

$watch() ​

API imperativa para criar observadores.

• Tipo

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

• Detalhes

  O primeiro argumento é a fonte do observador. Pode ser uma sequência de caracteres do nome da propriedade do componente, uma simples sequência de caracteres do caminho delimitada por ponto, ou uma função recuperadora.

  O segundo argumento é a função de resposta. A função de resposta recebe o novo valor e o valor antigo da fonte observada.

  • immediate: aciona a função de resposta imediatamente na criação do observador. O valor antigo será undefined na primeira chamada.
  • deep: força a travessia profunda da fonte se for um objeto, para que a função de resposta dispare sobre as mutações profundas. Consulte Observadores Profundos.
  • flush: ajusta o tempo de descarga da função de resposta. Consulte Tempo de Descarga da Função de Resposta e watchEffect().
  • onTrack / onTrigger: depura as dependências do observador. Consulte Depuração do Observador.

• Exemplo

  Observar um nome de propriedade:

  js

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

  Observar um caminho delimitado por ponto:

  js

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

  Usar função recuperadora para expressões mais complexas:

  js

  this.$watch(  // sempre que a expressão `this.a + this.b` retornar  // um resultado diferente, o manipulador será chamado.  // É como se estivéssemos observando uma propriedade computada  // sem definir a própria propriedade computada.  () => this.a + this.b,  (newVal, oldVal) => {} )

  Parar o observador:

  js

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

• Consulte também:

  • Opções - watch
  • Guia - Observadores

$emit() ​

Aciona um evento personalizado na instância atual. Quaisquer argumentos adicionais serão passados à função de resposta do ouvinte.

• Tipo

  ts

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

• Exemplo

  js

  export default {  created() {  // único evento  this.$emit('foo')  // com argumentos adicionais  this.$emit('bar', 1, 2, 3)  } }

• Consulte também:

  • Componente - Eventos
  • Opção emits

$forceUpdate() ​

Força a instância do componente à desenhar novamente

• Tipo

  ts

  interface ComponentPublicInstance {  $forceUpdate(): void }

• Detalhes

  Isto deve ser raramente necessário dado o sistema de reatividade totalmente automático da Vue. Os únicos casos em que podemos precisar dela é quando críamos explicitamente um estado de componente que não é reativo usando APIs de reatividade avançadas.

$nextTick() ​

Versão vinculada à instância da nextTick() global.

• Tipo

  ts

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

• Detalhes

  A única diferença da versão global de nextTick() é que a função de resposta passada à this.$nextTick() terá o seu contexto this vinculado à instância do componente atual.

• Consulte também: nextTick()