兄丢组件之间数据共享

<!-- 兄弟组件之间的数据共享方案是EventBus

    1、创建eventBus.js模块,并向外共享一个vue的实例对象

    eventBus.js:

        import Vue from 'vue'

        //向外共享一个实例对象

        export default new Vue()

    2、在数据的发送方调用bus.$emit('事件名称',要发送的数据)方法触发自定义事件

        数据发送方:

        import bus from './eventBus.js'

        export default{

            data(){

                return {

                    msg:'hello vue.js'

                }

            },

            methods:{

                sendMsg(){

                    bus.$emit('share',this.msg)

                }

            }

        }

    3、在数据的接收方,调用·bus.$on("事件名",事件处理函数)方法注册一个自定义事件    

        数据接收方:

        import bus from './eventBus.js'

        export defualt{

            data(){

                return{

                    msgFromLeft:''

                }

            },

            created(){

                bus.$on('share', val=>{

                    this.msgFromLeft=val

                })

            }

        }

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值