# Propriétés d'Instance

# $data

Type: Object
Détails:

Objet de données que l'instance de composant observe. Les proxys de l'instance du composant accèdent aux propriétés qui sont dans l'objet data.
Voir aussi: Options / Data - data

# $props

Type: Object
Détails:

Un objet représentant les propriétés actuelles qu'un composant a reçues.Les proxys de l'instance du composant accèdent aux propriétés qui sont dans l'objet props.

# $el

Type: any
Lecture seulement
Détails:

L'élément racine du DOM que l'instance de composant gère.

Pour les composants utilisant fragments, $el sera l'espace réservé dans le nœud du DOM que Vue utilise pour garder une trace de la position du composant dans le DOM. Il est recommandé d'utiliser template refs pour un accès direct aux éléments du DOM au lieu de s'appuyer sur $el.

# $options

Type: Object
Lecture seulement
Détails:

Les options d'instanciation utilisées pour l'instance de composant actuelle. Ceci est utile lorsque vous souhaitez inclure des propriétés personnalisées dans les options:
```
const app = Vue.createApp({
  customOption: 'foo',
  created() {
    console.log(this.$options.customOption) // => 'foo'
  }
})
```
1
2
3
4
5
6

# $parent

Type: Instance de Composant
Lecture seulement
Détails:

L'instance parente, si l'instance actuelle en a une.

# $root

Type: Instance de Composant
Lecture seulement
Détails:

Instance du composant racine de l'arborescence du composant actuel. Si l'instance actuelle n'a pas de parents, cette valeur sera elle-même.

# $slots

Type: { [name: string]: (...args: any[]) => Array<VNode> | undefined }
Lecture seulement
Détails:

Utilisé pour accéder automatiquement au contenu distribué par slots. Chaque slot nommé a sa propre propriété correspondante (par exemple, le contenu de v-slot:foo sera trouvé à this.$slots.foo()). La propriété default contient soit des nœuds non inclus dans un slot nommé soit le contenu de v-slot:default.

L'accès à this.$Slots est plus utile lors de l'écriture d'un composant avec une fonction render.

Exemple:

<blog-post>
  <template v-slot:header>
    <h1>À Propos de moi</h1>
  </template>

  <template v-slot:default>
    <p>
      Voici un contenu de page, qui sera inclus dans $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 app = Vue.createApp({})

app.component('blog-post', {
  render() {
    return Vue.h('div', [
      Vue.h('header', this.$slots.header()),
      Vue.h('main', this.$slots.default()),
      Vue.h('footer', this.$slots.footer())
    ])
  }
})

1
2
3
4
5
6
7
8
9
10
11

Voir aussi:

# $refs

Type: Object
Lecture seulement
Détails:

Un objet d'éléments du DOM et d'instances de composants, enregistré avec l'attributs ref.

Voir aussi:
- Template refs
- Attributs spéciaux - ref

# $attrs

Type: Object
Lecture seulement
Détails:

Contient des liaisons d'attributs et des événements du scope parent qui ne sont pas reconnus (et extraits) en tant que props du composant ou un custom events. Lorsqu'un composant n'a aucune props ou custom events déclarés, il contient essentiellement toute les liaisons du scope parent, et peut être transmis à un composant interne via v-bind="$attrs" - utile lors de la création de Composants d'ordre supérieur.

Voir aussi:
- Attributs Non-Prop
- Options / Divers - inheritAttrs

← Divers Méthodes d'Instance →