vue任意两个组件的传值（事件总线）

关注

原创最新推荐文章于 2026-03-11 00:17:07 发布 1.9k 阅读 AI 写同款· GEO 优化 ›

银河麒麟V10开机卡Logo？别慌，手把手教你进单用户模式修复（附详细命令）本文详细解析银河麒麟V10操作系统启动时卡Logo的故障原因，并提供进入单用户模式的完整解决方案。通过GRUB引导菜单修改启动参数，执行文件系统检查、图形服务修复等关键命令，帮助用户快速恢复系统正常运行，适用于运维人员和普通用户应对紧急启动问题。阅读详情

父子组件之间的传值在某些场景下是比较麻烦的，前几天看到一个新的传值方式，我自己试了一下，感觉还是很方便的，在这里跟大家分享下
第一步，在main.js中挂载方法，代码如下

var bus = new Vue()//新创建一个实例，用以传值
Vue.prototype.bus = bus//挂载在vue的原型上

第二步，在传出值的组件中注册事件，带上需要传的值

<template>
  <div class="childa">

    <button @click="sendTo">Childa</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: 'jaychou'
    }
  },
  methods: {
    sendTo () {
      this.bus.$emit('sendTo', this.name)//注册事件，传值
    }
  }
}
</script>

第三步，在另外一个组件中接收

<template>
  <div class="childb">
    {{a}}
  </div>
</template>

<script>
export default {
  data () {
    return {
      a: ''
    }
  },
  created () {
    this.bus.$on('sendTo', name=> {
      this.a= name
    })
  }
}
</script>