vue-events-Vue.js的简单事件处理。-Vue.js开发

  • B4_427823
    了解作者
  • 19.8KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-16 01:08
    上传日期
vue-events一个Vue.js插件,可简化事件。 适用于Vue 1.0和Vue 2.0。 安装1.)通过Yarn或NPM $ yarn安装软件包add vue-ev vue-events一个Vue.js插件,可以简化事件。 适用于Vue 1.0和Vue 2.0。 安装1.)通过Yarn或NPM安装软件包$ yarn添加vue-events $ npm安装vue-events 2.)在项目中安装插件。 从'vue'导入Vue从'vue-events'导入VueEvents Vue.use(VueEvents)窗口.Vue = require('vue')require('vue-events')方法方法参数描述文档vm。$ events。$ emit事件,有效负载使用给定的有效负载发送事件。 虚拟机$ emit虚拟机$ event
vue-events-master.zip
  • vue-events-master
  • .gitignore
    26B
  • README.md
    4.4KB
  • LICENSE
    1.1KB
  • package.json
    774B
  • src
  • index.js
    3.1KB
  • types
  • vue.d.ts
    178B
  • events.d.ts
    1.8KB
  • index.d.ts
    233B
  • .npmignore
    11B
  • yarn.lock
    54.1KB
内容介绍
# vue-events A [Vue.js](http://vuejs.org) plugin that simplify events. Works with both `Vue 1.0` & `Vue 2.0`. ## Installation ##### 1.) Install package via Yarn or NPM ```bash $ yarn add vue-events ``` --- ```bash $ npm install vue-events ``` ##### 2.) Install plugin within project. ```javascript import Vue from 'vue' import VueEvents from 'vue-events' Vue.use(VueEvents) ``` --- ```javascript window.Vue = require('vue') require('vue-events') ``` ## Methods Method | Params | Description | Docs ------------------- | ----------------- | -------------------------------------------------------------------------- | --------------------------------------------- `vm.$events.$emit` | `event, payload` | Emit the event with the given payload. | [vm.$emit](https://vuejs.org/v2/api/#vm-emit) `vm.$events.emit` | `event, payload` | Emit the event with the given payload. _Alias for `vm.$events.$emit`_ | [vm.$emit](https://vuejs.org/v2/api/#vm-emit) `vm.$events.fire` | `event, payload` | Emit the event with the given payload. _Alias for `vm.$events.$emit`_ | [vm.$emit](https://vuejs.org/v2/api/#vm-emit) `vm.$events.$on` | `event, callback` | Listen for the event with the given callback. | [vm.$on](https://vuejs.org/v2/api/#vm-on) `vm.$events.on` | `event, callback` | Listen for the event with the given callback. _Alias for `vm.$events.$on`_ | [vm.$on](https://vuejs.org/v2/api/#vm-on) `vm.$events.listen` | `event, callback` | Listen for the event with the given callback. _Alias for `vm.$events.$on`_ | [vm.$on](https://vuejs.org/v2/api/#vm-on) `vm.$events.$off` | `event, callback` | Remove event listener(s) for the event | [vm.$off](https://vuejs.org/v2/api/#vm-off) `vm.$events.off` | `event, callback` | Remove event listener(s) for the event. _Alias for `vm.$events.$off`_ | [vm.$off](https://vuejs.org/v2/api/#vm-off) `vm.$events.remove` | `event, callback` | Remove event listener(s) for the event _Alias for `vm.$events.$off`_ | [vm.$off](https://vuejs.org/v2/api/#vm-off) ## Usage ### The `$events` prototype object. This plugin extends `Vue.prototype` to include a new `$events` object, which is a just a plain `vm` that will serve as your global event bus. The `$events` `vm` has a couple aliases for the standard event methods. #### Firing an event There are 3 methods that fire events. _Note: `$events.fire` & `$events.emit` are aliases for `$events.$emit`_ ```javascript new Vue({ data() { return { eventData: { foo: 'baz' } } }, mounted() { this.$events.fire('testEvent', this.eventData); this.$events.emit('testEvent', this.eventData); this.$events.$emit('testEvent', this.eventData); } }) ``` #### Listening for an event There are 3 methods that register event listeners. _Note: `$events.listen` & `$events.on` are aliases for `$events.$on`._ ```javascript new Vue({ mounted() { this.$events.listen('testEvent', eventData => console.log(eventData)); this.$events.on('testEvent', eventData => console.log(eventData)); this.$events.$on('testEvent', eventData => console.log(eventData)); } }) ``` #### Removing an event listener There are 3 methods that remove event listeners. _Note: `$events.off` & `$events.remove` are aliases for `$events.$off`._ ```javascript new Vue({ mounted() { this.$events.on('testEvent', eventData => console.log(eventData)); }, beforeDestroy() { this.$events.$off('testEvent') this.$events.off('testEvent') this.$events.remove('testEvent') } }) ``` ### The `events` component options. Provide an `events` map as part of your component options and vue-events will automatically call $on when the component is mounted and $off when the component is destroyed. ```javascript new Vue({ events: { testEvent(eventData){ console.log(eventData) } } }) ``` Inside the event handlers, `this` is bound to the component instance. This way you can access your component's data, props, computed, methods, etc. For example: ```javascript new Vue({ events: { onShowAlert(message){ this.modalVisible = true this.message = message } } }) ``` ## Demo If you'd like to demo `vue-events` try [vue-mix](https://github.com/cklmercer/vue-mix) ## License [MIT](http://opensource.org/licenses/MIT)
评论
    相关推荐