在Vue.js中使用事件总线在组件之间传递数据

2020年12月30日11:22:19 发表评论 40 次浏览

本文概述

先决条件

这篇文章适合各个阶段的开发人员, 包括初学者。

在阅读本文之前, 你应该已经掌握了以下几点:

  • 已安装Node.js 10.x及更高版本。你可以通过在终端/命令提示符下运行以下命令来验证你是否具有此版本:
node -v
  • Visual Studio代码编辑器或类似的代码编辑器。
  • Vue的最新版本已在你的计算机上全局安装
  • 你的计算机上已安装Vue CLI 3.0。为此, 请先卸载旧的CLI版本:
npm uninstall -g vue-cli

然后安装新的:

npm install -g @vue/cli
  • 下载Vue入门项目这里。
  • 解压下载的项目
  • 导航到解压缩的文件并运行命令以使所有依赖项保持最新:
npm install

发射器问题

Vue使用以下方法通过父组件在两个子组件之间进行通信事件发射器.

当你在子组件中设置事件并在父组件中设置侦听器时, 反应将通过父组件传递到嵌套组件。

尽管这是一个有价值的解决方案, 但是随着项目的发展, 它可能变得笨拙。

解决方案:事件总线

本质上, 事件总线是一个Vue.js实例, 它可以在一个组件中发出事件, 然后直接在另一个组件中侦听并响应所发出的事件, 而无需父组件的帮助。

根据定义, 使用事件总线比使用事件发射器更有效, 因为它需要较少的代码来运行。

我们将创建一个事件总线实例作为一个单独的文件, 将其导入要共享数据的两个组件中, 然后允许这些组件在一个安全的私有通道中通过此共享实例进行通信。

这通常称为发布-订阅方法。

演示版

今天, 我们将逐步完成事件总线的创建和使用过程, 以促进两个组件之间的通信。

我们为制作了一个自定义演示.
不完全是。点击这里查看.

在Vue.js中使用事件总线在组件之间传递数据1

事件总线入门

首先, 我们要创建事件总线。我们将在我们内部进行main.js文件。定义后, 你的main.js文件应如下所示:

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
export const bus = new Vue();
new Vue({
  render: h => h(App), }).$mount('#app')

如你所见, 我们创建了一个新的Vue实例-一种安全的抽象, 我们可以在其中处理组件之间的通信, 而无需在通信中涉及父组件。

创建一个新组件

我们需要两个子组件进行通信。但是, 你会发现只有一个测试值入门项目中的组件。

创建一个新文件并调用它test2.vue并将下面的代码块粘贴到其中:

<template>
  <div>
  </div>
</template>
<script>
export default {
  name: 'Test2', props: {
    msg: String
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

现在, 转到应用程序文件并像导入测试值文件。在如下所示的组件下注册文件:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" alt="在Vue.js中使用事件总线在组件之间传递数据">
    <Test v-bind:header="header"/>
    <Test2 v-bind:header="header"/>
  </div>
</template>
<script>
import Test from './components/Test.vue';
import Test2 from './components/Test2.vue';
export default {
  name: 'app', components: {
    Test, Test2
  }, data (){
    return {
      header:'initial header'
    }
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

设置活动

现在你的两个组件已经准备就绪, 你可以在Test2组件中侦听事件的同时通过Test组件中的发射设置事件。

打开你的测试值文件并将下面的代码块复制到其中:

<template>
  <div>
      <h1 v-on:click="changeHeader">{{header}}</h1>
  </div>
</template>
<script>
import { bus } from '../main'
export default {
  name: 'Test', props: {
    header:{
        type: String
    } 
  }, methods: {
      changeHeader (){
          this.header = "changed header";
          bus.$emit('changeIt', 'changed header');
      }
  }
}
</script>

在这里, 你会看到事件总线是从导入的main.js, 模板通过props显示一个标题元素, 并且它上面有一个click事件, 该事件指向methods部分中的逻辑。

手动更换测试值组件出现在方法部分内部, 并通过事件总线发出事件。

该语句告诉Vue发出一个名为changeIt的事件并传递字符串标头已更改作为争论。

聆听事件并做出反应

设置事件后, 我们需要使第二个组件侦听并对事件做出反应。打开你的Test2.vue文件并复制到下面的代码块中:

<template>
  <div> <h1>{{header}}</h1>
  </div>
</template>
<script>
import { bus } from '../main';
export default {
  name: 'Test2', props: {
    header:{
        type: String
    } 
  }, created (){
    bus.$on('changeIt', (data) => {
      this.header = data;
    })
  }
}
</script>

当事件总线导入时, 我们在模板内看到的只是插值符号。没有Vue指令或绑定。

我们将使用生命周期挂钩在将应用程序安装在DOM上时初始化监听过程。生命周期挂钩被称为在应用程序初始化时创建的。

$ on语句现在正在侦听changeIt事件, 向下传递data参数, 并将其设置为新的标头。

Vue.js中事件总线的可视化插图

当你单击界面中的第一个标题时, 两个标题都会更改。

删除监听器

在销毁Vue实例之前, Vue会自动卸载并删除这些侦听器。但是, 如果要手动销毁它们, 可以运行以下简单命令:

bus.$off();

可以找到本教程的完整代码在GitHub上.

确保生产Vue应用中的组件能够按预期呈现日志火箭.

调试Vue.js应用程序可能会很困难, 尤其是在用户会话中有数十种甚至数百种变体的情况下。如果你有兴趣监视和跟踪生产中所有用户的Vue突变,

尝试notlogy

.

LogRocket仪表板免费试用横幅

https://notlogy.com/signup/

日志火箭就像Web应用程序的DVR一样, 实际上记录了Vue应用程序中发生的所有事情, 包括网络请求, JavaScript错误, 性能问题等等。你可以汇总并报告问题发生时应用程序所处的状态, 而不用猜测为什么会发生问题。

notlogy Vuex插件将Vuex突变记录到notlogy控制台, 为你提供导致错误的原因以及发生问题时应用程序处于何种状态的上下文。

现代化调试Vue应用程序的方式–免费开始监控.

总结

这是Vue.js中事件总线的介绍。事件总线是在不通过中央或父组件的情况下实现组件之间独立通信的安全方法。

与其他方法相比, 事件总线更加简洁, 所涉及的代码更少, 从而提供了一个出色的抽象平台。

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: