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

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

Copier après la connexion

É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

Copier après la connexion

Ensuite, installez-en une nouvelle :

npm install -g @vue/cli

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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

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

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>

Copier après la connexion

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>

Copier après la connexion

在模板部分，您可以看到第一个组件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>

Copier après la connexion

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