Vue 组件间的数据共享(4)

 Vue 组件间有5种常见的数据共享方式:

1:props $emit
2:依赖注入(provide  inject )
3:处理边界(\$root,\$parent,\$refs)
4:eventbus 
5:vuex

下面详细介绍eventbus方式的数据传递:

EventBus

优点:组件之间没有任何关系也能通过EventBus进行数据传递

缺点:数据不支持响应式

EventBus又称为事件总线。在Vue中可以使用 EventBus来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件,但也就是太方便所以若使用不慎,就会造成难以维护的“灾难”。

如何使用EventBus

一、初始化

var eventbus = new Vue();

二、使用

eventbus.$emit("事件", "参数"); //派发事件

eventbus.$on('事件', function (msg) {//函数体}); //声明事件

 <div id="app">
     <button @click="handlerClick">send</button>
     <compa></compa>
</div>
        const compb = {
            template: '<h2>compb</h2>',
            mounted() {
                eventbus.$on('compevent', function (msg) {
                    console.log(msg);
                });
            }
        }
        const compa = {
            template: 
            `<div><compb></compb></div>
            `,
            components: {
                compb
            }
        }


        var vm = new Vue({
            el: "#app",
            components: {
                compa
            },
            methods: {
                handlerClick() {
                    eventbus.$emit("compevent", "hello world");
                }
            }
        });

结果:

运行结果

控制台

执行过程:点击button 触发handlerClick事件,在handlerClick中抛发事件,数据作为参数,定义事件的组件里触发事件接受参数。

参考文档:Vue文档

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值