3.Vue非父子组件之间的通信

最新推荐文章于 2024-09-04 14:17:28 发布

转载最新推荐文章于 2024-09-04 14:17:28 发布 · 210 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000013936472

文章标签：

#javascript #ViewUI

本文介绍Vue中非父子组件间如何通过创建事件中心实现通信。包括事件中心的创建、组件触发事件、接收事件等步骤。

Vue非父子组件之间的通信

如果不是父子组件需要通信,那将怎样实现呢?
首先我们需要创建一个事件中心,通过事件中心来接收或者传递事件,作为一个中转站

1.创建事件中心

let eventControl = new Vue();

2.组件1触发事件

<template>
  <div @pubEvent="changeData"></div>  //监听组件触发的事件,然后调用changeData方法
</template>

<script type="text/javascript">
  export default {
    data () {
      return {
      }
    }    
    methods: {
      changData () {
        eventControl.$emit('changTo', 'msg') //触发事件中心,以及需要传递的事件
      }
    }
  }
</script>

<style type="text/css">
</style>

此时此刻已完成需要的事件的添加到了中转站,触发事件已经完成

3.组件2接收触发事件

<template>
  <div></div>
</template>

<script type="text/javascript">
  export default {
    data () {
      return {
        msg: ''
      }
    }    
    create () {
        eventControl.$on('changTo', () => {
          this.msg = msg                     //接收触发事件中心 
        }) 
    }
  }
</script>

<style type="text/css">
</style>

此时此刻已完成接收事件的监听在中转站,接收事件已经完成,当触发事件被点击的,则中转站中的接收事件
会监听到,从而完成费父子组件间的通信,进行传递msg信息

4.自定义事件传递信息这里不做阐述,方法会较为复杂,需要了解的可以观看官方Api,谢谢