Fonction Emit dans Vue.js

Les composants Vue ont une $emit()fonction qui vous permet de transmettre des événements personnalisés dans l'arborescence des composants. (1)

généralement, la fonction d'émission informe le composant parent que quelque chose a changé dans le composant enfant.

Je vais approfondir la fonction d'émission avec un exemple.

J'ai un composant enfant en tant que <SearchJokes /> . C'est un composant qui filtre les blagues comme tout ce qui est tapé en entrée. Les blagues ne sont qu'un large éventail qui contient toutes les blagues courantes.

Mon composant parent est index.vue.js.

Pour pouvoir filtrer toutes mes données de blagues, je dois modifier les données dans mon composant parent car j'ai toutes les données de blagues dans le composant parent via axios fetch. Pour cette raison, je dois apporter une fonction de searchJokes à index, qui est un composant enfant vers un composant parent.

Le composant SearchJokes a une entrée, cette entrée n'a que du texte que nous y tapons, avec ce texte, nous pourrions filtrer un grand tableau que nous avons dans le composant parent.

C'est notre SearchJokes (composant enfant).

comme vous pouvez le voir à la ligne 20 sur l'image ci-dessus, nous avons la fonction this.$emit('search-text', this.text).

Cette fonction est juste une fonction pouvant être transportée vers le composant parent. Cela signifie que nous aurons une fonction de recherche de texte dans le composant parent. Regardons le composant parent ce que nous avons là.

Lorsque vous regardez les images ci-dessous, j'ai 2 choses principales sur le composant enfant. <SerachJokes v-on:search-text="searchText"/>

comme vous vous en souvenez sur le composant enfant, nous avons décrit le nom search-text comme string , ici, dans mparent, le nom du composant doit correspondre, nous l'avons donc décrit ici;

v-on:search-text as searchText, ce qui signifie que nous aurons un nouveau nom appelé searchText que nous devons écrire dans le composant parent. en passant, v-on n'est qu'une écoute d'événement, ce qui signifie que nous écoutons l'événement de recherche de texte, dans notre méthode parente de nom de méthode searchText.

De plus, nous aurions pu mettre le même nom dans le composant enfant que searchText, comme this.$emit('searchText', this.text). Cela pourrait fonctionner de la même manière que nous tapons du texte de recherche, c'est juste un nom que nous donnons à notre méthode.

méthode searchText dont j'ai besoin pour remplir le composant parent.

Nous sommes tous prêts, après avoir décrit notre méthode searchText, nous sommes prêts à utiliser notre nouvelle fonction de filtre. J'ai tapé mal dans le filtre m'a donné toutes les blagues incluant des gros mots.

J'ai pris cet exemple sur une vidéo youtube de Travery Media, le lien est dans les ressources.

Ressources:

ressource (1)