Comprendre les composants fonctionnels dans Vue.js

Un composant fonctionnel dans Vue est un composant qui prend un contexte de rendu et renvoie du HTML rendu. Il n'a aucune instance. Pour créer des composants fonctionnels, vous devez utiliser l'attribut functional:true et la fonction de rendu pour créer l'objet

Les composants fonctionnels vous permettent de créer des composants simples de manière concise en passant du contexte, ce qui les rend très simples et très populaires . Ce que je partagerai ensuite dans l'article, ce sont les composants fonctionnels de Vue.js, qui ont une certaine valeur de référence et j'espère que cela sera utile à tout le monde.

[Cours recommandés : Tutoriel Vue.js]

Qu'est-ce qu'un composant fonctionnel

Un composant fonctionnel peut être vu comme une fonction liée à un composant, c'est-à-dire qu'il s'agit d'un composant qui prend un contexte de rendu et renvoie le rendu HTML. Il n’y a pas d’instance, donc il n’y a pas de ceci.

Création d'un composant fonctionnel

Pour créer un composant fonctionnel, vous devez utiliser l'attribut functional: true et la fonction de rendu pour créer l'objet. Un exemple de composant FunctionalButton sera créé dans l'exemple suivant :

export default {
  functional: true,
  render(createElement, context) {
    return createElement('button', 'Click me');
  }};

Contexte de rendu

context Le paramètre vu sur la fonction de rendu est appelé le contexte de rendu . C'est un objet contenant les propriétés suivantes :

props : objet fournissant des props

children : tableau de nœuds enfants VNode

slots : la fonction renvoie un objet slot

parent : une référence au composant parent

listeners : un objet contenant les auditeurs v-on enregistrés sur le composant. Ceci est juste un alias pointant vers data.on.

injections : Si l'option injecter est utilisée, l'objet contient des propriétés qui doivent être injectées.

data : objet contenant toutes les propriétés précédentes

événement déclencheur

Le composant fonctionnel n'ayant pas d'instance, l'écouteur d'événement vient du contexte.listeners propriété parent, donc le code suivant peut être utilisé pour implémenter l'événement click

Exemple : Supposons qu'il existe un composant App.vue, où FunctionalButton.js peut être importé pour l'utiliser dans son modèle

<template>
  <FunctionalButton>
    Click me
  </FunctionalButton></template>

export default {
  functional: true,
  render(createElement, { props, listeners, children }) {
    return createElement(
      'button',
      {
        attrs: props,
        on: {
          click: listeners.click
        }
      },
      children
    );
  }};

Résumé : ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à tout le monde.

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!