Explication détaillée des emplacements de comportement de non-rendu dans Vue

Dans cet article, nous discutons des problèmes que le mode slot sans rendu dans Vue peut aider à résoudre.

Les slots étendus introduits dans Vue.js 2.3.0 améliorent considérablement la réutilisation des composants. Le modèle de composant sans rendu est apparu pour résoudre le problème de la fourniture d'un comportement réutilisable et d'une représentation enfichable.

Ici, nous verrons comment résoudre le problème inverse : comment fournir une apparence réutilisable et un comportement enfichable.

Composants sans rendu

Ce modèle convient aux composants qui implémentent un comportement complexe et ont une présentation personnalisable.

Il remplit les fonctions suivantes :

1. Le composant implémente tous les comportements
2. Le slot scoped est responsable du rendu
3. Le contenu de secours garantit que le composant peut être utilisé directement.

Par exemple : un composant qui effectue une requête Ajax et affiche le résultat d'un slot. Le composant gère les requêtes Ajax et charge l'état, tandis que l'emplacement par défaut fournit la présentation.

Il s'agit d'une implémentation simplifiée :

<template>
  <div>
    <slot v-if="loading" name="loading">
        <div>Loading ...</div>
    </slot>
    <slot v-else v-bind={data}>
    </slot>
  </div>
</template>

<script>
export default {
  props: ["url"],
  data: () => ({
    loading: true,
    data: null
  }),
  async created() {
    this.data = await fetch(this.url);
    this.loading = false;
  }
};
</script>

Utilisation :

<lazy-loading url="https://server/api/data">
  <template #default="{ data }">
    <div>{{ data }}</div>
  </template>
</lazy-loading>

Pour l'article original sur ce modèle, veuillez vérifier ici.

Une question inversée

Et si le problème était inversé : Imaginez si la caractéristique principale d'un composant était sa représentation, et en plus son comportement devait être personnalisable.

Supposons que vous souhaitiez créer un composant d'arborescence basé sur SVG, comme ceci :

Vous souhaitez fournir l'affichage et le comportement du SVG, par exemple au clic Lorsque vous rétractez des nœuds et mettez du texte en surbrillance.

Le problème se pose lorsque vous avez l'intention de ne pas coder en dur ces comportements et de laisser les utilisateurs du composant les remplacer librement.

La solution simple pour exposer ces comportements consiste à ajouter des méthodes et des événements au composant.

Vous pouvez l'implémenter comme ceci :

<script>
export default {
  mounted() {
    // pseudo code
    nodes.on(&#39;click&#39;,(node) => this.$emit(&#39;click&#39;, node));
  },
  methods: {
    expandNode(node) {
      //...
    },
    retractNode(node) {
      //...
    },
    highlightText(node) {
      //...
    },
  }
};
</script>

Si l'utilisateur du composant souhaite ajouter un comportement au composant, il doit utiliser ref dans le composant parent, par exemple :

<template>
  <tree ref="tree" @click="onClick"></tree>
</template>

<script>
export default {
  methods: {
    onClick(node) {
      this.$refs.tree.retractNode(node);
    }
  }
};
</script>

Cette méthode présente plusieurs inconvénients :

1. Le comportement par défaut ne peut plus être fourni
2. Le code de comportement finira par être copié et collé fréquemment
3. Le comportement n'est pas réutilisable

Voyons comment les slots sans rendu résolvent ces problèmes.

Slots sans rendu

Le comportement consiste essentiellement à démontrer des réactions aux événements. Créons donc un slot qui reçoit l'accès aux événements et aux méthodes des composants : La propriété

<template>
  <div>
    <slot name="behavior" :on="on" :actions="actions">
    </slot>
  </div>
</template>

<script>
export default {
  methods: {
    expandNode(node) { },
    retractNode(node) { },
   //...
  },
  computed:{
    actions() {
      const {expandNode, retractNode} = this;
      return {expandNode, retractNode};
    },
    on() {
      return this.$on.bind(this);
    }
  }
};
</script>

on est la méthode $on du composant parent, donc tous les événements peuvent être écoutés.

Les comportements peuvent être implémentés sous forme de composants sans rendu. Écrivez ensuite le composant d'extension de clic :

export default {
  props: ['on','action']

  render: () => null,

  created() {
    this.on("click", (node) => {
      this.actions.expandNode(node);
    });
  }
};

Utilisation :

<tree>
  <template #behavior="{ on, actions }">
    <expand-on-click v-bind="{ on, actions }"/>
  </template>
</tree>

Les principaux avantages de cette solution sont :

• La possibilité de fournir un comportement par défaut via un contenu alternatif :

Par exemple, en déclarant un composant graphique comme :

<template>
  <div>
    <slot name="behavior" :on="on" :actions="actions">
      <expand-on-click v-bind="{ on, actions }"/>
    </slot>
  </div>
</template>

• vous pouvez créer un composant réutilisable et implémenter des comportements standards que les utilisateurs de ce composant peuvent choisir

Considérez un composant de surbrillance au survol :

export default {
  props: ['on','action']

  render: () => null,

  created() {
    this.on("hover", (node) => {
      this.actions.highlight(node);
    });
  }
};

Remplacez le comportement standard :

<tree>
  <template #behavior="{ on, actions }">
    <highlight-on-hover v-bind="{ on, actions }"/>
  </template>
</tree>

• Le slot de comportement est composable

Ajoutez deux prédéfinis comportements :

<tree>
  <template #behavior="{ on, actions }">
    <expand-on-click v-bind="{ on, actions }"/>
    <highlight-on-hover v-bind="{ on, actions }"/>
  </template>
</tree>

• Lisibilité de la solution

Les composants tels que les comportements sont auto-descriptifs. La propriété

• Extensibilité

on permet d'accéder à tous les événements du composant. Par défaut, de nouveaux événements sont disponibles pour ce créneau.

Résumé

Les slots Renderless offrent une solution intéressante pour exposer des méthodes et des événements dans les composants. Ils fournissent un code plus lisible et réutilisable.

Le code du composant tree qui implémente ce mode peut être trouvé sur github : Vue.D3.tree

Adresse originale en anglais : https:// alligator.io/vuejs/renderless-behavior-slots/

Auteur : David Desmaisons

Recommandations associées :

2020 Résumé frontal des questions d'entretien avec Vue (avec réponses)

Recommandation du didacticiel Vue : 2020 des 5 dernières sélections de didacticiels vidéo vue.js

Plus pour pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

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!