Vue EventBus事件侦听（$on、$emit、$off、$once）

eventBus.js

import Vue from 'vue';export const EventBus = new Vue();

components/Parent.vue

<template><div>我是父组件<Son></Son></div>
</template><script>
/*
vm.$on( event, callback )
参数：
{string | Array<string>} event (数组只在 2.2.0+ 中支持)
{Function} callback
用法：
监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。vm.$once( event, callback )
参数：
{string} event
{Function} callback
用法：
监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。vm.$off( [event, callback] )
参数：
{string | Array<string>} event (只在 2.2.2+ 支持数组)
{Function} [callback]
用法：
移除自定义事件监听器。
如果没有提供参数，则移除所有的事件监听器；
如果只提供了事件，则移除该事件所有的监听器；
如果同时提供了事件与回调，则只移除这个回调的监听器。vm.$emit( eventName, […args] )
参数：
{string} eventName
[...args]
触发当前实例上的事件。附加参数都会传给监听器回调。*/import Son from '../components/Son';import {EventBus} from '../eventBus';export default {components: {Son,},mounted () {//监听grandson事件EventBus.$on("grandson",this.handleMmsg);},  methods: {handleMmsg(msg) {console.log(msg);//移除事件监听，故Parent只监听一次EventBus.$off("grandson",this.handleMmsg);}},}
</script><style scoped></style>

components/Son.vue

<template><div><hr>我是子组件 <br><Grandson></Grandson></div>
</template><script>import Grandson from '../components/Grandson';import {EventBus} from '../eventBus';export default {components: {Grandson,}, mounted () {//监听事件EventBus.$on("grandson",(msg)=>{console.log(msg);});},     }
</script><style scoped></style>

components/Grandson.vue

<template><div><hr>我是孙子组件<br><button @click="handleMsg">点击发出消息</button></div>
</template><script>import {EventBus} from '../eventBus';export default {methods: {handleMsg() {//发出grandson事件EventBus.$emit("grandson","我是组件GrandSon")}},}
</script><style scoped></style>

App.vue

<template><div id="app"><Parent></Parent></div>
</template><script>
import Parent from './components/Parent'export default {name: 'App',components: {Parent,}
}
</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>

效果截图：

Vue EventBus事件侦听（$on、$emit、$off、$once）相关推荐

vue 键盘事件监听
原文链接: vue 键盘事件监听上一篇: 使用环形队列触发延时任务下一篇: vue 一次失败的dom游戏制作参考 https://cn.vuejs.org/v2/guide/events.htm ...
vue中事件监听watch
vue中的watch实际上是用来监听vue实例中的数据变化. 监听String <template><div @click="stringClick">{{ ...
android move事件,小程序Android版本touchmove 事件侦听
- 当前 Bug 的表现(可附上截图) 在安卓端绑小程序定一个view 的touchmove 事件时,纵向触摸滑动每秒只有5次事件回调但是用网页端复现的时候表现正常 - 预期表现 - 复现路径 - ...
vue 侦听器侦听对象属性_Spring中的异步和事务性事件侦听器
vue 侦听器侦听对象属性内置的事件发布功能从Spring的早期版本开始存在,并且对于处理同一应用程序上下文中Spring组件之间的基本通信仍然有用. 通常,应用程序可以生成应用程序事件(可以是任意 ...
[vue] EventBus注册在全局上时，路由切换时会重复触发事件，如何解决呢？
[vue] EventBus注册在全局上时,路由切换时会重复触发事件,如何解决呢? 建议在created里注册,在beforeDestory移出个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃 ...
addeventlistener事件参数_Vue的钩子事件和程序化侦听
对于Vue的事件机制,其实有一些高级技巧,我们最好能够掌握. 一.组件的生命周期钩子事件 Vue的生命周期函数,其实就是Vue开发者设定的一些hook钩子,你只要往hook里面编写代码,它就可以执行. ...
Vue学习（二）动态绑定与事件监听
v-bind&v-on Day1 文章目录 v-bind&v-on 前言一.V-bind 1.简单实现 2.Class的绑定 2.1对象绑定 2.2数组绑定 3.style的绑定 3 ...
Vue 2 | Part 5 列表渲染和事件监听
之前在vue里面绑定数据,都只是单个地绑定.这期我们来看一下怎样渲染列表,然后通过事件监听方法往列表里面增加item. 列表渲染废话不多说,直接上代码: <div id="app&q ...
vue双击事件_我总结了12个Vue.js开发技巧和窍门
我真的很喜欢使用Vue.js,每次使用框架时,我都会喜欢深入研究其功能和特性.通过这篇文章,我向你介绍了12个很酷的提示和技巧,你可能尚未意识到这些技巧和窍门,以帮助你成为更好的Vue开发人员. 更漂 ...

Vue EventBus事件侦听（$on、$emit、$off、$once）

Vue EventBus事件侦听（$on、$emit、$off、$once）相关推荐

最新文章

热门文章