# 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 emthis.$slots.foo()
). A propriedadedefault
contém os outros nós não incluídos nos slots nomeados ou conteúdos dov-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
15const { 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
12Ver também:
# $refs
Tipo:
Object
Somente leitura
Detalhes:
Um objeto dos elementos do DOM e as instâncias de componente, registrados com atributos ref
- Ver também:
# $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.