{"id":15402186,"url":"https://github.com/liby99/vue-event-loader","last_synced_at":"2025-03-14T17:25:13.585Z","repository":{"id":57395824,"uuid":"117354147","full_name":"Liby99/vue-event-loader","owner":"Liby99","description":"Event Loader and Broadcaster for VueJs","archived":false,"fork":false,"pushed_at":"2018-01-13T15:52:56.000Z","size":5,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-21T22:37:38.368Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/Liby99.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":"2018-01-13T15:23:09.000Z","updated_at":"2019-05-02T20:34:00.000Z","dependencies_parsed_at":"2022-09-03T06:02:53.817Z","dependency_job_id":null,"html_url":"https://github.com/Liby99/vue-event-loader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Liby99%2Fvue-event-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Liby99%2Fvue-event-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Liby99%2Fvue-event-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Liby99%2Fvue-event-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Liby99","download_url":"https://codeload.github.com/Liby99/vue-event-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243616985,"owners_count":20319986,"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":[],"created_at":"2024-10-01T16:01:23.631Z","updated_at":"2025-03-14T17:25:13.563Z","avatar_url":"https://github.com/Liby99.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue-Event-Loader\n\n## Overview\n\nvue-event-loader is a VueJs plugin for much more easier event setup as well as\nevent broadcasting. It's very light-weight and efficient.\n\nThere are two main functionalities in vue-event-loader. The first one is event\nregistration, and the second is event broadcast.\n\n## Installation\n\nYou can use NPM to install vue-event-loader:\n\n``` bash\n$ npm install vue-event-loader\n```\n\nAfter installation, you need to `use` vue-event-loader to include this plugin\nfor VueJs:\n\n``` js\nVue.use(require(\"vue-event-loader\"));\n```\n\n## Introduction\n\n### Event Registration\n\nIn your regular VueJs component setup, along with all the original data, methods\nand other things, you add a new field called \"events\" and add items within it.\nLike:\n\n``` js\nvar vm = new Vue({\n  data: { a: 1 },\n  methods: {\n    plus: function () {\n      this.a++\n    }\n  },\n  events: {\n    \"event.a.change\": function (newValue) {\n      this.a = newValue;\n    }\n  }\n})\n```\n\nThe event must has a key, which is called `event.a.change` in the following\nexample. To trigger the event, simply call\n\n``` js\nvm.$emit(\"event.a.change\", 42);\n```\n\nThis is basically an alias for the original `$on` method, but much easier to\nsetup. If you don't want to use a quoted string as the key, you definitely can.\nYou can also use the ES2016 function definition syntax (if you want to use it\nin browser you may want to use webpack or babel to compile it correctly).\n\n``` js\n  ...\n  events: {\n    change (value) {\n      this.value = value;\n    }\n  }\n  ...\n```\n\nNote that using arrow definition in events is strictly prohibited (will led\nto unexpected behavior), like\n\n``` js\n  ...\n  events: {\n    \"event.a.change\": (value) =\u003e {\n      // THIS IS WRONG!!!!!!!!!!!!\n    }\n  }\n  ...\n```\n\n### Event broadcast\n\nAll the events you written in `events` field will be registered to the\nbroadcaster - which means, the broadcaster will know which component it should\nemit the event to by default. The logics are really straight forward:\n\n``` js\nVue.broadcast(\"[EVENT]\", value1, value2, value3, ...);\n```\n\nThe above statement will broadcast a event to every component which is\nregistered to the `[EVENT]` (which means, there's a `[EVENT]` in the component's\n`events` field), along with all the values following the event afterwards.\n\nFor example, we have a component which registered to `panel.show` event. If this\nevent is broadcasted and the id is `my_panel`, then we will call the `show`\nmethod of this instance.\n\n``` js\nvar myComponent = new Vue({\n  ...\n  events: {\n    \"component.show\": function (id) {\n      if (id == \"my_component\") this.show();\n    }\n  }\n})\n```\n\nWhen we broadcast the event, we would do\n\n``` js\nVue.broadcast(\"component.show\", \"my_component\");\n```\n\nto show that component.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliby99%2Fvue-event-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliby99%2Fvue-event-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliby99%2Fvue-event-loader/lists"}