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 ;
// 子组件中 <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 vueL'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事件要带走的数据
// bus.js文件 import Vue from 'vue' export default new Vue()
// 组件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>
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!