vue使用eventBus实现同级组件的通讯

新创建一个vue实例用于调度事件的绑定和发送

成都创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于网站制作、成都网站建设、白银区网络推广、微信小程序开发、白银区网络营销、白银区企业策划、白银区品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联公司为所有大学生创业者提供白银区建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com

可以做到同级组件相互通讯，传递参数，点击第一个组件会修改第二个组件的label值，点击第二个组件会修改第二个组件的label值

vue 使用eventBus实现同级组件的通讯

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <script src="vue.js"></script>
</head>
<body>
<div id="app">
 <one></one>
 <two></two>
</div>
</body>
<script>
 // 使用一个vue实例 作为事件的载体,用于绑定事件和处理发送事件，作为调度中心
 let eventBus = new Vue()
 let one = {
  template: '<div>{{val}} <button @click="click">click</button></div>',
  data() {
   return {
    val: 0
   }
  },
  created() {
   //为one绑定事件，如果two_click事件发生了，则执行回调函数
   eventBus.$on('two_click',
    (val) => {
     // 这个this 指的是one的vue实例
     this.val = val
    }
   )
  },
  methods: {
   click() {
    // 如果one被点击了，则发送一个one_click的事件，并传递一个参数
    eventBus.$emit('one_click', 11)
   }
  }
 }
 let two = {
  template: '<div>{{val}} <button @click="click">click</button></div>',
  data() {
   return {
    val: 0
   }
  },
  created() {
   eventBus.$on('one_click',
    (val) => {
     this.val = val
    })
  },
  methods: {
   click() {
    eventBus.$emit('two_click', 22)
   }
  }
 }
 new Vue({
  el: '#app',
  components: {
   one,
   two
  }
 })
</script>
</html>

总结

以上所述是小编给大家介绍的vue 使用eventBus实现同级组件的通讯，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！

网站名称：vue使用eventBus实现同级组件的通讯
转载注明：https://www.cdcxhl.com/article2/jgpsoc.html

成都网站建设公司_创新互联，为您提供电子商务、微信公众号、云服务器、响应式网站、搜索引擎优化、品牌网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容