Vue Event Bus

问题陈述

我有两个组成部分。我将数据从一个组件传递到另一个组件。接收方应显示接收的数据

创建新的Vue应用程序

要创建新的Vue CLI应用程序，请运行以下命令。确保已安装Vue CLI。

//安装Vue CLI，如果你还没安装它
$ npm install -g @ vue / cli 
//创建Vue App 
$ vue init webpack <project-name> 
//启动项目
$ npm run dev

创建组件

现在我将创建两个组件。其中一个将是发布者，另一个将是订阅者。名为Leftside.vue和订阅者的发布者的组件是Rightside.vue。

Leftside.vue

<template>
  <div class="left-side">
    <div class="content">
      <div>
        <label for="location"> Location </label>
        <input type="text" name="location" v-model="location" />
      </div>
      <div>
        <label for="caption"> Caption </label>
        <input type="text" name="caption" v-model="caption" />
      </div>
      <input type="submit" v-on:click="sendData" value="Send">
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      location: '',
      caption: ''
    }
  },
  methods: {
    sendData () {
      return ''
    }
  }
}
</script>

<style scoped>
.left-side {
  width: 50%;
  height: 500px;
  float: left;
  background-color: #35495e;
}
input[type=submit] {
    width: 100%;
    background-color: #42b883;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
</style>

Rightside.vue

<template>
  <div class="right-side">
    <div class="content">
      <p> {{ data.location }} </p>
      <p> {{ data.caption }} </p>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: {
        location: 'Location placeholder',
        caption: 'Payload placeholder'
      }
    }
  },
  methods: {
  }
}
</script>

<style scoped>
.right-side {
  width: 50%;
  height: 500px;
  float: right;
  background-color: #42b883;
  border: 1px;
  border-color: black;
}
</style>

然后创建home.vue,在引入并使用这些组件。

WX20190801-172044@2x.png

下一步是将Vue实例创建为事件总线。现在，在您的/src目录中创建一个新文件，命名它eventBus.js。eventBus.js非常简单，我们只需要两行代码

import Vue from 'vue'
export default new Vue()

接下来我们将eventBus.js在我们的组件中使用它

Leftside.vue

<template>
  ....
</template>

<script>
import EventBus from '../eventBus'
export default {
  data () {
    return {
      location: '',
      caption: ''
    }
  },
  methods: {
    sendData () {
      const payload = {
        location: this.location,
        caption: this.caption
      }
      EventBus.$emit('DATA_PUBLISHED', payload)
    }
  }
}
</script>

<style scoped>
  ....
</style>

Rightside.vue

<template>
  ....
</template>

<script>
import EventBus from '../eventBus'
export default {
  data () {
    return {
      data: {
        location: 'Location placeholder',
        caption: 'Payload placeholder'
      }
    }
  },
  methods: {
    updateData (payload) {
      this.data = payload
    }
  },
  mounted () {
    EventBus.$on('DATA_PUBLISHED', (payload) => {
      this.updateData(payload)
    })
  }
}
</script>

<style scoped>
  ....
</style>

在每个组件中导入eventBus.js。EventBus用作消息代理的对象。

发布

Leftside.vue

EventBus.$emit(‘DATA_PUBLISHED’, payload) 

该emit()方法用于发布消息。它接收两个参数。第一个是事件名称，第二个是要传递的数据。

订阅

Rightside.vue

EventBus.$on('DATA_PUBLISHED', (payload) => {
  this.updateData(payload)
})

该on()方法用于监听EventBus上接收两个参数的事件。第一个是事件名称，第二个是回调方法。

该DATA_PUBLISHED事件名称用于标识发布者发布和订阅者订阅的事件。

其他

• off()用于删除订阅的事件
• once()用于订阅事件但只触发一次。订阅者触发后，订阅将被删除。