VUE：EventHub

想想如果从最顶层组件传一个 data 给最底层组件，仅仅使用父子传递的方式会变得十分麻烦。

而 EventHub 就是用来解决这个问题的：在需要获取 data 的组件上设置一个监听器，每次要传递 data 时，那个组件就广播这个事件并调用这些监听器。我们不难发现 EventHub 的主要功能就两个： 监听和广播，当然还有去掉监听器。而 Vue 刚好给我们提供了这些功能，我们可以使用 Vue 来描述这些功能：

let eventHub = new Vue()// 监听
eventHub.$on('eventName', (data) => {console.log('Trigger this event and receive ' + data)
})// 广播
eventHub.$emit('eventName', data)// 去掉监听
eventHub.$off('eventName')

使用方法：

1-1、 在顶层组件的 data 里初始化 EventHub，并使用 provide 对外暴露这个 EventHub。

import Vue from "vue";export default {name: "App",components: {GrandParent},data() {return {eventHub: new Vue()};},provide() {return {eventHub: this.eventHub};},methods: {setRandomValue() {this.eventHub.$emit("update:msg", Math.random() * 100);}}
};

1-2、然后在需要监听的组件里用 inject 注入这个依赖，并在 created 里添加事件监听。

export default {inject: ["eventHub"],data() {return {msg: ""};},created() {this.eventHub.$on("update:msg", msg => {this.msg = msg;});}
};

2-1、在main.js注入

// 注入
Vue.prototype.$eventHub= Vue.prototype.$eventHub ||  new Vue()

主页面：

<hello-world></hello-world>
<el-button type="primary" @click="senddata">发送</el-button>import HelloWorld from '../components/HelloWorld.vue'
components: {HelloWorld
},
methods: {senddata(){this.$eventHub.$emit("hhh", "哈哈");}
}

组件页面：

created() {// 绑定接收回调过来的事件处理 this.$eventHub.$on("hhh", msg=>{console.log(msg);});
},

VUE：EventHub相关推荐

vue：虚拟dom的实现
Vitual DOM是一种虚拟dom技术,本质上是基于javascript实现的,相对于dom对象,javascript对象更简单,处理速度更快,dom树的结构,属性信息都可以很容易的用javascr ...
Vue：echarts画图实战，异步获取数据在Vue上使用echarts进行画图
Vue:echarts画图实战,异步获取数据在Vue上使用echarts进行画图一.效果图二.资源主题编辑器 ECharts 教程实现代码------想要进行实战的同学可以研究以下代码,下面的 ...
Vue：利用Vue生成的网页，在浏览器中的标签页中的图标与标题怎么修改为自己的？
Vue:利用Vue生成的网页,在浏览器中的标签页中的图标与标题怎么修改为自己的? 在解决这个问题的时候,在网上搜到了许多答案,可以说是众说纷纭,作者结合了多个答案,最后解决了这个问题,下面把用到的资源 ...
Vue：Vue的＜ span ＞文字怎么加粗？
Vue:Vue的< span >文字怎么加粗? 资源 span文字加粗_span盒子对象内字体加粗
Vue：echarts的柱状图怎样按照比例缩小？
Vue:echarts的柱状图怎样按照比例缩小? 资源: vue制作echart图表随着画面等比例放大缩小第二种方法:在div中使用echarts,利用div的参数来限制echarts生成的图表的大 ...
Vue：echarts的柱状图为什么X轴上的文字不显示？
Vue:echarts的柱状图为什么X轴上的文字不显示? 资源: echarts x轴文字显示不全(解决方案) echarts柱状图X轴底部文字有的不显示出来?
Vue：Vue和ECharts，在Vue上进行可视化处理，在Vue上画图
Vue:Vue和ECharts,在Vue上进行可视化处理,在Vue上画图一.预科知识 Vue CLI ECharts 二.资源在Vue中使用echarts 如何在 Vue 项目中使用 echart ...
Vue：触发视图更新的hack
前言触发视图更新的hack,hack的是什么?hack那些数据改变却没有被vue检测到的更新!那么vue有哪些情况是检测不到数据的变动的? 官方说明的有下面两大类: 数组使用下标更新数组元素: 使 ...
vue是什么软件_Angular vs React vs Vue：2020年的最佳选择是什么？
在2020年,想象没有HTML,CSS和Javascript的Web开发是不切实际的. Javascript是Web应用程序前端开发的灵魂. 如果您登陆此页面,那么我认为您在Java语言和Java编程 ...

VUE：EventHub

VUE：EventHub相关推荐

最新文章

热门文章