Méthodes d'implémentation du transfert de données de composants et du transfert d'événements dans la documentation Vue

Vue est un framework front-end populaire. Il possède des fonctionnalités de composantisation, permettant aux développeurs de décomposer une page complexe en modules petits et indépendants. Dans Vue, le transfert de données et le transfert d'événements entre composants sont des sujets très importants. Dans cet article, nous présenterons en détail les méthodes d'implémentation du transfert de données de composants et du transfert d'événements dans Vue.

1. Transfert de données de composants

Dans Vue, le transfert de données de composants est divisé en deux catégories, l'une est le transfert du composant parent vers le composant enfant et l'autre est le transfert du composant enfant vers le composant parent.

1. Le composant parent transmet les données au composant enfant

Pour transmettre les données du composant parent au composant enfant, vous devez utiliser l'option props. Les accessoires sont un moyen pour le composant enfant de recevoir les données transmises par le composant parent. Transmettez les données au composant enfant via v-bind : nom d'attribut dans le composant parent et recevez les données via l'option props dans le composant enfant.

Regardez d'abord le code du composant parent :

<template>
  <div>
    <child-component :title="title"></child-component>
  </div>
</template>

<script>
import ChildComponent from './child.vue'

export default {
  components: { ChildComponent },
  data () {
    return {
      title: 'this is the title'
    }
  }
}
</script>

Dans le code ci-dessus, nous définissons un composant principal et transmettons l'attribut title au composant enfant via v-bind :.

Regardez ensuite le code du sous-composant :

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  }
}
</script>

Dans le code ci-dessus, nous définissons un sous-composant et recevons l'attribut title transmis par le composant parent via l'option props.

2. Le sous-composant transmet les données au composant parent

Pour transmettre les données du sous-composant au composant parent, vous devez utiliser la méthode $emit $emit est un moyen pour le sous-composant de transmettre des données au composant parent. Utilisez la méthode $emit dans le composant enfant pour déclencher un événement personnalisé et transmettre les données qui doivent être transmises. Écoutez cet événement personnalisé dans le composant parent via le nom @event et recevez les données transmises par le composant enfant dans le composant enfant. fonction de réponse aux événements.

Regardez d'abord le code dans le sous-composant :

<template>
  <div>
    <button @click="increment">{{ count }}</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: 0
    }
  },
  methods: {
    increment () {
      this.count++
      this.$emit('increment', this.count)
    }
  }
}
</script>

Dans le code ci-dessus, nous définissons un sous-composant et utilisons la méthode $emit pour déclencher un incrément d'événement personnalisé lorsque le bouton est cliqué, et utilisons la valeur de comptage actuelle comme paramètre Transmis au composant parent.

Ensuite, regardez le code du composant parent :

<template>
  <div>
    <h1>{{ totalCount }}</h1>
    <child-component @increment="onChildIncrement"></child-component>
  </div>
</template>

<script>
import ChildComponent from './child.vue'

export default {
  components: { ChildComponent },
  data () {
    return {
      totalCount: 0
    }
  },
  methods: {
    onChildIncrement (count) {
      this.totalCount += count
    }
  }
}
</script>

Dans le code ci-dessus, nous définissons un composant parent, et lors de l'écoute de l'événement d'incrémentation du composant enfant, passons la valeur de comptage en paramètre à la fonction de réponse onChildIncrement , et dans la réponse, mettez à jour la valeur de totalCount dans la fonction.

2. Livraison d'événements de composants

Dans Vue, la livraison d'événements entre les composants peut être réalisée via le bus d'événements et vuex.

1. Bus d'événements

Le bus d'événements est une méthode simple de transmission d'événements. Il crée un bus d'événements central et tous les composants peuvent enregistrer des événements ou déclencher des événements sur le bus d'événements. Dans Vue, vous pouvez utiliser la propriété Vue.prototype.$bus pour créer un bus d'événements.

Voyons d'abord comment utiliser le bus d'événements :

// main.js中创建事件总线
import Vue from 'vue'

Vue.prototype.$bus = new Vue()

// 在需要传递事件的组件中注册事件和触发事件
this.$bus.$emit('my-event', data)

this.$bus.$on('my-event', (data) => { ... })

Dans le code ci-dessus, nous créons un bus d'événements via la propriété Vue.prototype.$bus dans le fichier main.js, puis passons $ dans le composant qui doit transmettre l'événement La méthode submit déclenche l'événement personnalisé my-event et transmet les données à transmettre en tant que paramètre à la fonction de réponse à l'événement, dans le composant qui doit recevoir l'événement, écoutez l'événement personnalisé my-event ; via la méthode $on et dans la fonction de réponse aux événements Recevez les données transmises.

2.vuex

vuex est une solution de gestion d'état officiellement recommandée. Elle place l'état de tous les composants dans une arborescence d'état globale. Dans vuex, vous pouvez utiliser des objets de magasin pour stocker l'état global et modifier l'état global via des mutations, des actions et des getters.

Voyons d'abord comment utiliser vuex :

// store.js文件
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    asyncIncrement (context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
})

// 在组件中使用vuex
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState({
      count: state => state.count
    }),
    ...mapGetters([
      'doubleCount'
    ])
  },
  methods: {
    ...mapMutations([
      'increment'
    ]),
    ...mapActions([
      'asyncIncrement'
    ])
  }
}

Dans le code ci-dessus, nous définissons un objet de magasin qui stocke l'état global dans le fichier store.js et utilisons des mutations, des actions et des getters pour modifier et obtenir l'état global. ; Dans le composant, l'état, la fonction de modification et la fonction d'action dans le magasin sont mappés via des fonctions auxiliaires telles que mapState, mapMutations, mapActions et mapGetters, et utilisés dans le composant.

Conclusion

Dans Vue, le transfert de données et le transfert d'événements entre composants sont des sujets très importants. Pour différents scénarios et besoins, nous pouvons utiliser props, $emit, event bus et vuex pour implémenter les données de différentes manières. La maîtrise de ces compétences nous permet d'organiser et de gérer nos applications Vue avec plus de flexibilité.

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!