Comment utiliser les émetteurs d'événements pour modifier les données des composants dans Vue.js

Cet article vous présentera comment utiliser les émetteurs d'événements pour transmettre des données et leur état des composants enfants à leur composant parent dans vue.js. Cet article convient aux développeurs de tous niveaux, y compris les débutants.

Avant de commencer…

Nous pouvons utiliser des accessoires dans Vue.js pour transmettre des données aux composants enfants Consultez l'article sur la méthode Vue dans .js pour transmettre les données du composant parent au composant enfant.

Avant de lire cet article, vous devriez avoir les points suivants :

node.js 10.x et supérieur a été installé. Vous pouvez le vérifier en exécutant la commande suivante dans un terminal/invite de commande :

node -v

• Éditeur de code - Visual Studio recommandé

• Dernière version de Vue, globalement installée sur votre machine

• Vue CLI 3.0 installée sur votre machine. Pour ce faire, désinstallez d'abord l'ancienne version CLI :

npm uninstall -g vue-cli

Ensuite, installez-en une nouvelle :

npm install -g @vue/cli

• Téléchargez-en une ici

  Projet Vue Starter

• Décompressez le projet téléchargé

• Accédez au fichier décompressé et exécutez la commande suivante pour conserver toutes les dépendances jusqu'à date :

npm install

Transmission des données via les composants

Pour obtenir les valeurs des données de l'application Composants parents dans les composants (tels que app.vue) sont transmis aux composants enfants (tels que les composants imbriqués), et Vue.js nous fournit une plate-forme appelée props.

Les accessoires peuvent être appelés propriétés personnalisées que vous pouvez enregistrer sur un composant qui vous permet de définir des données dans le composant parent, de lui attribuer une valeur, puis de transmettre la valeur à une propriété d'accessoire qui peut être référencée dans composants enfants.

Cet article vous montrera l’envers de ce processus. Afin de transmettre et de mettre à jour les valeurs des données du composant parent à partir du composant enfant afin que tous les autres composants imbriqués soient également mis à jour, nous utilisons la construction émet pour gérer l'émission d'événements et les mises à jour des données.

Exemple :

Vous passerez par le processus suivant : émettre des événements à partir de composants enfants, configurer les composants parents d'écoute pour passer à partir des données des composants enfants, et enfin mettre à jour la valeur des données.

Si vous avez suivi cet article depuis le début, vous allez télécharger et ouvrir le

projet starter en vs code. Ce projet est complet avec le code complet à partir de cet article.

La raison pour laquelle nous en faisons un projet de démarrage est que vous pouvez essayer le concept d'hélice avant d'introduire le processus d'inversion.

Démarrer

Dans ce dossier, vous trouverez deux composants enfants :

et ttest.vue, son composant parent est un est2.vue fichier. Nous utiliserons les en-têtes des deux composants enfants pour illustrer cette méthode d'émission d'événements. Votre app.vue fichier devrait ressembler à ceci : Test.vue

<template>
  <div>
    <h1>Vue Top 20 Artists</h1>
    <ul>
      <li v-for="(artist, x) in artists" :key="x">
        <h3>{{artist.name}}</h3>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: &#39;Test&#39;,
  props: {
    artists: {
      type: Array
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
li{
    height: 40px;
    width: 100%;
    padding: 15px;
    border: 1px solid saddlebrown;
    display: flex;
    justify-content: center;
    align-items: center;
  }
a {
  color: #42b983;
}
</style>

Pour que les en-têtes reçoivent les en-têtes de la définition implicite dans la section des attributs de données, créez la section de données et ajoutez la définition, puis ajoutez le symbole d'interpolation dans le modèle, cela ressemble à ceci :

<template>
  <div>
    <h1>{{header}}</h1>
    <ul>
      <li v-for="(artist, x) in artists" :key="x">
        <h3>{{artist.name}}</h3>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: &#39;Test&#39;,
  props: {
    artists: {
      type: Array
    }
  },
  data() {
    return {
     header: &#39;Vue Top Artists&#39;
    }
  }
}
</script>

Si vous exécutez l'application, vous obtiendrez exactement la même interface qu'au démarrage. L'étape suivante consiste à modifier cette propriété définie sur

. click

Basculer le titre

Pour basculer le titre, vous devez ajouter un écouteur d'événement au titre au clic et préciser que l'inclusion sera A fonction pour la logique qui se produit lorsque vous cliquez dessus.

<template>
  <div>
    <h1 v-on:click="callingFunction">{{header}}</h1>
    <ul>
      <li v-for="(artist, x) in artists" :key="x">
        <h3>{{artist.name}}</h3>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: &#39;Test&#39;,
  props: {
    artists: {
      type: Array
    }
  },
  data() {
    return {
     header: &#39;Vue Top Artists&#39;
    }
  },
  methods: {
    callingFunction(){
      this.header = "You clicked on header 1";
    }
  }
}
</script>

Maintenant, votre titre se transforme en chaîne à l'intérieur de la fonction appelante au clic.

Configurer l'émetteur

À ce stade, vous souhaitez transmettre le même comportement au parent composant de sorte que lorsque vous cliquez dessus, chaque titre imbriqué dans le composant parent change.

Pour ce faire, vous allez créer un émetteur qui émettra un événement dans le composant enfant que le composant parent pourra écouter et auquel répondre (c'est la même logique que l'écouteur d'événement du composant).

Modifiez la partie script dans le test. vue au bloc de code suivant :

<script>
export default {
  name: &#39;Test&#39;,
  props: {
    artists: {
      type: Array
    },
    header: {
      type: String
    }
  },
  data() {
    return {
      // header: &#39;Vue Top Artists&#39;
    }
  },
  methods: {
    callingFunction(){
      // this.header = "You clicked on header 1"
      this.$emit(&#39;toggle&#39;, &#39;You clicked header 1&#39;);
    }
  }
}
</script>

Ici, définissez le type de données attendu par l'en-tête comme prop. Ensuite, dans cette méthode, il existe une instruction generate qui indique à Vue d'émettre un événement lorsqu'il est basculé (comme tout autre événement, tel qu'un événement de clic), en passant la chaîne comme paramètre. C'est tout ce qu'il y a à faire pour configurer un événement qui sera écouté dans un autre composant.

Écouter les événements émis

Maintenant, la prochaine chose à faire après avoir créé l'événement est de l'écouter et d'y répondre. Copiez ce bloc de code dans votre fichier app.vue :

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test v-bind:header="header" v-on:toggle="toggleHeader($event)" />
    <Test v-bind:artists="artists" />
    <test2 v-bind:header="header"/>
    <test2 v-bind:artists="artists" />
  </div> 
</template>
<script>
import Test from &#39;./components/Test.vue&#39;
import Test2 from &#39;./components/Test2&#39;
export default {
  name: &#39;app&#39;,
  components: {
    Test, Test2
  },
  data (){
    return {
      artists: [
       {name: &#39;Davido&#39;, genre: &#39;afrobeats&#39;, country: &#39;Nigeria&#39;},
       {name: &#39;Burna Boy&#39;, genre: &#39;afrobeats&#39;, country: &#39;Nigeria&#39;},
       {name: &#39;AKA&#39;, genre: &#39;hiphop&#39;, country: &#39;South-Africa&#39;}
      ],
      header: &#39;Vue Top Artists&#39;
    }
  },
  methods: {
    toggleHeader(x){
      this.header = x;
    }
  }
}
</script>
<style>
#app {
  font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在模板部分，您可以看到第一个组件test上有两个vue指令。第一个是v-bind，它将initial header属性绑定到artists数组下的数据对象中的隐式定义；初始化时，将显示字符串vue top artists。

第二个指令是v-on，它用于监听事件；要监听的事件是toggle（记住，您已经在测试组件中定义了它），它的调用函数是toggleheader。此函数已创建，子组件中的字符串将通过$event参数传递到此处显示。

含义

这会将数据通过发射器传递到父组件，因此由于其他组件嵌套在父组件中，因此每个嵌套组件中的数据都会重新呈现和更新。进入test2.vue文件并将此代码块复制到其中：

<template>
  <div>
    <h1>{{header}}</h1>
    <ul>
      <li v-for="(artist, x) in artists" :key="x">
      <h3>{{artist.name}} from {{artist.country}}</h3>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: &#39;Test2&#39;,
  props: {
    artists: {
      type: Array
    },
    header: {
      type: String
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
li{
    height: 40px;
    width: 100%;
    padding: 15px;
    border: 1px solid saddlebrown;
    display: flex;
    justify-content: center;
    align-items: center;
  }
a {
  color: #42b983;
}
</style>

这里，数据插值被设置并指定为道具对象中的一个字符串。在你的开发服务器上运行应用程序:

npm run serve

可以看到，一旦事件在父组件中被响应，所有组件都会更新它们的报头，即使仅在一个子组件中指定了定义。

您可以在github上找到本教程的完整代码。

结论

您可以看到在Vue中使用事件和发射器的另一个有趣的方面:您现在可以在一个组件中创建事件，并在另一个组件中监听它并对它作出反应。

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

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!