Méthodes de Vue pour accéder aux éléments et composants (avec exemples)

Le contenu de cet article concerne la méthode d'accès aux éléments et composants dans Vue (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Accès à l'instance racine

Dans le composant enfant de chaque nouvelle instance de Vue, son instance racine est accessible via la propriété $root.
Exemple :

// Vue 根实例
new Vue({
  data: {
    foo: 1
  },
  computed: {
    bar: function () { /* ... */ }
  },
  methods: {
    baz: function () { /* ... */ }
  }
})

Tous les sous-composants peuvent accéder ou utiliser cette instance comme magasin global.

/ 获取根组件的数据
this.$root.foo

// 写入根组件的数据
this.$root.foo = 2

// 访问根组件的计算属性
this.$root.bar
// 调用根组件的方法
this.$root.baz()

Remarque :
Ceci est pratique pour les démos ou les très petites applications avec un petit nombre de composants. Cependant, ce modèle ne convient pas aux applications moyennes et grandes. Par conséquent, dans la plupart des cas, nous vous recommandons fortement d'utiliser Vuex pour gérer l'état de l'application.

Accès à l'instance du composant parent

Semblable à $root, l'attribut $parent peut être utilisé pour accéder à l'instance du composant parent à partir d'un composant enfant. Il offre la possibilité d'atteindre le composant parent à tout moment ultérieurement, au lieu de transmettre des données au composant enfant sous forme d'accessoires.
Remarque :

在绝大多数情况下，触达父级组件会使得你的应用更难调试和理解，尤其是当你变更了父级组件的数据的时候。当我们稍后回看那个组件的时候，很难找出那个变更是从哪里发起的。

## Accéder aux instances ou aux sous-éléments d'un sous-composant ##
Malgré l'existence d'accessoires et d'événements, vous devrez parfois accéder à un sous-composant directement en Javascript. Pour y parvenir, vous pouvez attribuer une référence d'ID à ce sous-composant via l'attribut ref. Par exemple :

<base-input ref="usernameInput"></base-input>

Maintenant, dans le composant où vous avez défini cette référence, vous pouvez utiliser :

this.$refs.usernameInput

pour accéder à cette instance .
Lorsque ref est utilisé avec v-for, la référence que vous obtiendrez sera un tableau contenant ces sous-composants de la source de données correspondante.
Remarque :

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

Injection de dépendances

<google-map>
  <google-map-region v-bind:shape="cityBoundaries">
    <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
  </google-map-region>
</google-map>

Dans ce composant, tous les descendants de suivez Avec quelle carte interagir. Malheureusement, l'utilisation de l'attribut $parent ne s'adapte pas bien aux composants imbriqués plus profondément. C'est là qu'intervient l'injection de dépendances, en utilisant deux nouvelles propriétés d'instance : provide et inject. L'option
provide nous permet de spécifier les données/méthodes que nous souhaitons fournir aux composants descendants. Dans cet exemple, il s'agit de la méthode getMap à l'intérieur de  :

provide(){
    return{
        getMap:this.getMap
    }
}

Ensuite, dans n'importe quel composant descendant, nous pouvons utiliser l'option inject pour recevoir le contenu spécifié que nous souhaitons ajouter dans ces attributs. sur l'instance :

inject:['getMap']

Par rapport à $parent, cette utilisation nous permet d'accéder à getMap dans n'importe quel composant descendant sans exposer l'intégralité de l'instance Cela nous permet de mieux continuer à développer le composant sans craindre de modifier/supprimer quelque chose dont dépendent les sous-composants. Dans le même temps, les interfaces entre ces composants sont toujours clairement définies, tout comme les accessoires.
Le composant ancêtre n'a pas besoin de savoir quels composants descendants utilisent les propriétés qu'il fournit
Le composant descendant n'a pas besoin de savoir d'où proviennent les propriétés injectées
Remarque :

Cependant, la dépendance l'injection a toujours des effets négatifs. Il couple votre application avec son organisation actuelle de composants, ce qui rend la refactorisation plus difficile. De plus, les propriétés fournies ne répondent pas. C'est intentionnel, car les utiliser pour créer une échelle centralisée de données n'est pas aussi efficace que d'utiliser $root pour ce faire. Si la propriété que vous souhaitez partager est spécifique à votre application plutôt que générique, ou si vous souhaitez mettre à jour les données fournies dans un composant ancêtre, cela signifie que vous devrez peut-être passer à un composant réel comme la solution de gestion d'état Vuex.

Cet article est terminé ici. Pour un contenu plus passionnant, vous pouvez prêter attention à la colonne Vidéo du didacticiel JavaScript du site Web PHP chinois !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!