Vue.js

# Propriedades da Instância

# $data

  • Tipo: Object

  • Detalhes:

    O objeto de dados que a instância do componente está observando. A instância do componente faz proxy de acesso às propriedades em seu objeto de dados.

  • Ver também: Opções - Dados

# $props

  • Tipo: Object

  • Detalhes:

    Um objeto representando as props atuais que o componente recebeu. A instância do componente faz proxy de acesso às propriedades em seu objeto de props.

# $el

  • Tipo: any

  • Somente leitura

  • Detalhes:

    O elemento raiz do DOM que a instância do componente está gerenciando.

    Para componentes usando fragmentos, $el será o nó DOM placeholder que o Vue usa para acompanhar a posição do componente no DOM. Recomenda-se usar refs de template para acesso direto aos elementos DOM em vez de depender de $el.

# $options

  • Tipo: Object

  • Somente leitura

  • Detalhes:

    As opções da instanciação usadas pela instância do componente atual. Isso é útil quando você deseja incluir propriedades personalizadas nas opções:

    const app = createApp({
  customOption: 'foo',
  created() {
    console.log(this.$options.customOption) // => 'foo'
  }
})
    1
    2
    3
    4
    5
    6

# $parent

  • Tipo: Component instance

  • Somente leitura

  • Detalhes:

    A instância pai, se a instância atual tiver uma.

# $root

  • Tipo: Component instance

  • Somente leitura

  • Detalhes:

    A instância do componente raiz da árvore de componentes atual. Caso a instância atual não tenha pais, este valor será ela mesmo.

# $slots

  • Tipo: { [name: string]: (...args: any[]) => Array<VNode> | undefined }

  • Somente Leitura

  • Detalhes:

    Usado para o acesso de conteúdo distribuído com slots de forma programática. Cada slot nomeado tem sua propriedade correspondente (e.g. o conteúdo de v-slot:foo será encontrado em this.$slots.foo()). A propriedade default contém os outros nós não incluídos nos slots nomeados ou conteúdos do v-slot:default.

    Acessar this.$slots é mais útil ao construir um componente com uma função de renderização.

  • Exemplo:

    <blog-post>
  <template v-slot:header>
    <h1>Sobre</h1>
  </template>

  <template v-slot:default>
    <p>
      Aqui está o conteúdo da página, que será incluído em $slots.default.
    </p>
  </template>

  <template v-slot:footer>
    <p>Copyright 2020 Evan You</p>
  </template>
</blog-post>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    const { createApp, h } = Vue
const app = createApp({})

app.component('blog-post', {
  render() {
    return h('div', [
      h('header', this.$slots.header()),
      h('main', this.$slots.default()),
      h('footer', this.$slots.footer())
    ])
  }
})
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

  • Ver também:

# $refs

  • Tipo: Object

  • Somente leitura

  • Detalhes:

Um objeto dos elementos do DOM e as instâncias de componente, registrados com atributos ref

# $attrs

  • Tipo: Object

  • Somente leitura

  • Detalhes:

Contém atributos vinculados do escopo-pai e eventos que não são reconhecidos (e extraídos) como props de componentes ou eventos personalizados. Quando um componente não possui nenhuma propriedade declarada ou eventos customizados, esse essencialmente contém todos os vínculos do escopo-pai, e pode ser passado abaixo para um componente interno via v-bind="$attrs" - útil ao criar componentes de ordem superior.

← Métodos de Instância →