Introduction à l'utilisation du transfert de valeurs et du bus d'événements (eventbus) dans les composants Vue non parent-enfant

Cet article vous présente une introduction à l'utilisation du transfert de valeur et du bus d'événements (eventbus) dans les composants Vue non-parent-enfant. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. , j'espère que cela vous aidera.

Parlons d'abord de ce qu'est un bus d'événements, qui est en fait le modèle d'éditeur d'abonnement

Par exemple, il existe deux méthodes sur cet objet ; l'un est activé (écoute, c'est-à-dire abonnement), l'autre est émis (déclencheur, c'est-à-dire publication), nous écoutons un événement via la méthode on, puis utilisons émettre pour déclencher l'événement et appelons la fonction de rappel sur à en même temps, complétant ainsi un déclencheur d'événement ;

Il s'agit d'un modèle de conception et n'a rien à voir avec le langage

Si vous ne savez pas ce qu'est le modèle d'éditeur d'abonnement, veuillez lire ; cet article Modèle de conception JavaScript - modèle observateur (mode éditeur-abonné)

Dans le développement réel, le problème le plus gênant est souvent le problème de transfert de valeur entre différents composants, si vous utilisez le bus d'événements, ce problème deviendra ; très simple ;

Inconvénients du propre bus d'événements de vue

Nous savons tous qu'une fois que vue est instanciée, elle a la capacité d'agir comme un objet de bus d'événements. it Il existe deux méthodes, $emit et $on;

Le document vue indique très clairement que $emit déclenchera des événements sur l'instance actuelle et que des paramètres supplémentaires seront transmis au rappel de l'auditeur

Puisque dans le travail réel, nous développons sous forme de composants, chaque composant est une instance

Par conséquent, il existe de grandes limites dans l'utilisation des capacités du bus de vue ; des sous-composants. Trigger au composant parent, mais ne peut pas transmettre de valeurs entre les composants non parents et enfants

Donc, à ce stade, nous avons besoin d'un objet bus d'événements global, nous permettant de monter ; des événements d'écoute et des événements déclencheurs ;

Par exemple, un composant enfant transmet une valeur à un composant parent ; il est très simple pour un composant parent de transmettre une valeur à un composant enfant ; nous n'en parlerons pas ici. 🎜>

// 子组件中
<template>
  <div>
    <span>{{child}}</span>
    <input type="button" value="点击触发" @click="send">
  </div>
</template>
<script>
  export default {
    data () {
      return {
        child: '我是子组件的数据'
      }
    },
    methods: {
      send () {
      // 如果传多个值就用逗号隔开 a, b, c
        this.$emit('fromChild', this.child)
      }
    }
  }
</script>

// 父组件
<template>
  <div>
    <span>{{name}}</span>
    // 在父组件中监听 fromChild事件
    <child @fromChild="onFromChild"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    },
    methods: {
      onFromChild: function (data) {
        // data就是子组件传过来的值
        // 如果传过来多个值就用逗号隔开去接收 data1, data2, data3
        this.name = data
      }
    }
  }
</script>

Implémentation d'un objet bus d'événements global Plusieurs méthodes

La méthode 1 est aussi la méthode que j'utilise moi-même (recommandée, simple)

L'idée générale est : dans main.js, qui est le fichier d'entrée, on ajoute un objet bus au prototype de vue

L'implémentation spécifique est la suivante :

Le composant A et le composant B suivants peuvent être n'importe lesquels des deux composants du projet

//在mian.js中
Vue.prototype.bus = new Vue()  //这样我们就实现了全局的事件总线对象

//组件A中，监听事件
this.bus.$on('updata', function(data) {
    console.log(data)  //data就是触发updata事件带过来的数据
})

//组件B中，触发事件
this.bus.$emit('updata', data)  //data就是触发updata事件要带走的数据

La méthode 2 est un peu plus compliquée, mais facile à comprendre

L'idée générale de mise en œuvre : Créez un nouveau fichier bus.js, instanciez vue dans ce fichier ; puis dans le composant A. Introduisez ce fichier bus.js dans le composant B respectivement, et suspendez la surveillance et le déclenchement d'événements sur l'instance bus.js, afin que la surveillance et le déclenchement globaux puissent être réalisé

Écrire un exemple

Fichier bus.js

// bus.js文件
import Vue from 'vue'
export default new Vue()

Composant A

// 组件A ，监听事件send
<template>
  <div>
    <span>{{name}}</span>
  </div>
</template>
<script>
  import Bus from './bus.js'
  export default {
    data () {
      return {
        name: ''
      }
    },
    created() {
      let _this = this
      // 用$on监听事件并接受数据
      Bus.$on('send', (data) => {
        _this.name = data
        console.log(data)
      })
    },
    methods: {}
  }
</script>

Composant B

// 组件B， 触发事件send
<template>
  <div>
    <input type="button" value="点击触发" @click="onClick">
  </div>
</template>
<script>
  import Bus from './bus.js'
  export default {
    data () {
      return {
        elValue: '我是B组件数据'
      }
    },
    methods: {
        // 发送数据
      onClick() {
        Bus.$emit('send', this.elValue)
      }
    }
  }
</script>

De cette façon, nous avons réalisé un transfert de valeur simple entre les composants non parents et enfants.

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!