{"id":13536085,"url":"https://github.com/cklmercer/vue-events","last_synced_at":"2025-04-02T02:32:16.153Z","repository":{"id":57395841,"uuid":"65210535","full_name":"cklmercer/vue-events","owner":"cklmercer","description":"Simple event handling for Vue.js","archived":true,"fork":false,"pushed_at":"2019-02-25T15:44:32.000Z","size":44,"stargazers_count":233,"open_issues_count":6,"forks_count":27,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-11T01:53:58.549Z","etag":null,"topics":["event-bus","events","plugin","vue","vue-events"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cklmercer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-08T14:21:30.000Z","updated_at":"2025-01-21T18:36:02.000Z","dependencies_parsed_at":"2022-09-03T06:10:20.537Z","dependency_job_id":null,"html_url":"https://github.com/cklmercer/vue-events","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cklmercer%2Fvue-events","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cklmercer%2Fvue-events/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cklmercer%2Fvue-events/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cklmercer%2Fvue-events/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cklmercer","download_url":"https://codeload.github.com/cklmercer/vue-events/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246743882,"owners_count":20826625,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["event-bus","events","plugin","vue","vue-events"],"created_at":"2024-08-01T09:00:34.539Z","updated_at":"2025-04-02T02:32:15.864Z","avatar_url":"https://github.com/cklmercer.png","language":"JavaScript","funding_links":[],"categories":["实用库","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","公用事业","Components \u0026 Libraries","Utilities","Awesome Vue.js","Utilities [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","自定义事件","Utilities","Custom Events"],"readme":"# vue-events\n\nA [Vue.js](http://vuejs.org) plugin that simplify events.\n\nWorks with both `Vue 1.0` \u0026 `Vue 2.0`.\n\n\n## Installation\n##### 1.) Install package via Yarn or NPM\n```bash\n$ yarn add vue-events\n```\n---\n```bash\n$ npm install vue-events\n```\n##### 2.) Install plugin within project.\n```javascript\nimport Vue from 'vue'\nimport VueEvents from 'vue-events'\nVue.use(VueEvents)\n```\n---\n```javascript\nwindow.Vue = require('vue')\nrequire('vue-events')\n```\n\n## Methods\nMethod              | Params            | Description                                                                | Docs\n------------------- | ----------------- | -------------------------------------------------------------------------- | ---------------------------------------------\n`vm.$events.$emit`  | `event, payload`  | Emit the event with the given payload.                                     | [vm.$emit](https://vuejs.org/v2/api/#vm-emit)\n`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)\n`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)\n`vm.$events.$on`    | `event, callback` | Listen for the event with the given callback.                              | [vm.$on](https://vuejs.org/v2/api/#vm-on)\n`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)\n`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)\n`vm.$events.$off`   | `event, callback` | Remove event listener(s) for the event                                     | [vm.$off](https://vuejs.org/v2/api/#vm-off)\n`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)\n`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)\n\n\n\n\n\n## Usage\n### The `$events` prototype object.\nThis plugin extends `Vue.prototype` to include a new `$events` object, which is a just a plain `vm`\nthat will serve as your global event bus. The `$events` `vm` has a couple aliases for the standard\nevent methods.\n\n\n#### Firing an event\nThere are 3 methods that fire events.\n\n_Note: `$events.fire` \u0026 `$events.emit` are aliases for `$events.$emit`_\n\n```javascript\nnew Vue({\n\n  data() {\n    return {\n      eventData: {\n        foo: 'baz'\n      }\n    }\n  },\n\n  mounted() {\n    this.$events.fire('testEvent', this.eventData);\n    this.$events.emit('testEvent', this.eventData);\n    this.$events.$emit('testEvent', this.eventData);\n  }\n\n})\n```\n\n#### Listening for an event\nThere are 3 methods that register event listeners.\n\n_Note: `$events.listen` \u0026 `$events.on` are aliases for `$events.$on`._\n\n```javascript\nnew Vue({\n  mounted() {\n    this.$events.listen('testEvent', eventData =\u003e console.log(eventData));\n    this.$events.on('testEvent', eventData =\u003e console.log(eventData));\n    this.$events.$on('testEvent', eventData =\u003e console.log(eventData));\n  }\n})\n```\n\n#### Removing an event listener\n\nThere are 3 methods that remove event listeners.\n\n\n_Note: `$events.off` \u0026 `$events.remove` are aliases for `$events.$off`._\n\n```javascript\nnew Vue({\n  mounted() {\n    this.$events.on('testEvent', eventData =\u003e console.log(eventData));\n  },\n\n  beforeDestroy() {\n    this.$events.$off('testEvent')\n    this.$events.off('testEvent')\n    this.$events.remove('testEvent')\n  }\n})\n```\n\n### The `events` component options.\nProvide 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.\n\n```javascript\nnew Vue({\n  events: {\n    testEvent(eventData){\n       console.log(eventData)    \n    }\n  }  \n})\n```\n\nInside 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:\n\n```javascript\nnew Vue({\n  events: {\n    onShowAlert(message){\n       this.modalVisible = true\n       this.message = message\n    }\n  }  \n})\n```\n\n## Demo\nIf you'd like to demo `vue-events` try [vue-mix](https://github.com/cklmercer/vue-mix)\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcklmercer%2Fvue-events","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcklmercer%2Fvue-events","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcklmercer%2Fvue-events/lists"}