Vue组件间通信之Bus

核心方法

$emit$on

Component One

<script>
  import Bus from 'Bus'
  export default {
    methods: {
      listen () {
        Bus.$on('event-name', function (data) {
          // 处理数据
        })
      }
    }
  }
</script>

Component Two

<script>
  import Bus from 'Bus'
  export default {
    data () {
      return {
        data
      }
    },
    methods: {
      send() {
        // 发送数据
        Bus.$emit('event-name', data)
      }
    }
  }
</script>

Bus

import Vue from 'vue'

const bus = new Vue()

export default bus
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,442评论 19 139
  • 下载安装搭建环境 可以选npm安装,或者简单下载一个开发版的vue.js文件 浏览器打开加载有vue的文档时,控制...
    冥冥2017阅读 11,262评论 0 42
  • 昨天看牙,医生开了两种药,吃的我四肢无力,哈欠连天只想睡觉。我可以请假吗? “人无远虑必有近忧”,最近越来越能体会...
    董S阅读 3,287评论 1 0
  • 2017年4月14日和2017年6月14日祁县、西六支乡政府向后对五里坡有合法承包手续的厂房进行了两次暴力强拆!没...
    kmyclbzj阅读 6,022评论 0 0
  • 前段儿时间我和室友在宿舍内开了个零食铺,主要目的是为了自己吃泡面小吃什么的比较方便些,却没想到小零食铺生意越来越红...
    若鱼若茄阅读 3,043评论 5 3