Skip to content
This repository was archived by the owner on Dec 1, 2023. It is now read-only.

Commit 3754740

Browse files
authored
Update README.md
Adding a short example
1 parent 6cd9fab commit 3754740

File tree

1 file changed

+26
-0
lines changed

1 file changed

+26
-0
lines changed

README.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,32 @@ new Vue({
6666
});
6767
```
6868

69+
### Short example
70+
Lets see how **easy** you can **watch global events** like reactive properties! (Like in this [example](https://vuejs.org/v2/examples/commits.html)).
71+
Let's assume you have a logout button in any component template and want it to be handled *somewhere else* without these nasty `$on(...)` and `$off(...)` lines in the created and destroy hooks.
72+
73+
```html
74+
<!-- logoutButton.vue -->
75+
<button @click="$trigger('logout:the-user')">Logout</button>
76+
```
77+
78+
```js
79+
// userManager.vue
80+
export default {
81+
name: 'any-other-component',
82+
events: {
83+
// the event name string binds the method name string
84+
'logout:the-user': 'logout'
85+
},
86+
methods: {
87+
// this method will be called everytime the event occurs
88+
logout (event, param) {
89+
this.$http.post('/logout')
90+
}
91+
}
92+
}
93+
```
94+
6995
## Changelog
7096

7197
Details changes for each release are documented in the [release notes](https://github.com/pagekit/vue-event-manager/releases).

0 commit comments

Comments
 (0)