Vue.js @ Communication between Vue components

Communication between Vue components.
---
Melbourne Vue.js Meetup: http://www.meetup.com/vuejs-melbourne/
Google Slides: http://bit.ly/2vZbJ9P
Presentation by: http://sylvainsimao.fr

Transcript

1. Communication between Vue components @VueJsAustralia
2. @maoosi @_maoosi Sylvain Simao Technical Lead @ Clemenger BBDO Melb.
3. Components?
4. DOM The entire UI can be abstracted into a tree of components
5. Break UI into components, responsible for managing a piece of DOM Nav Content Item Sidebar
6. Break UI into components, responsible for managing a piece of DOM Nav Content Item Sidebar
7. Components in practice
8. Components in practice
9. Communicating between components
10. Communication scenarios
11. Communication scenarios Parent-child (and reverse)
12. Communication scenarios Parent-child (and reverse) Upwards along the parent chain
13. Communication scenarios Parent-child (and reverse) Upwards along the parent chain Downward along the descendants
14. Communication scenarios Parent-child (and reverse) Upwards along the parent chain Downward along the descendants Different tree branch
15. Before Vue 2.x $dispatch( event, [..args] )
16. Before Vue 2.x $dispatch( event, [..args] ) $broadcast( event, [..args] )
17. Before Vue 2.x $dispatch( event, [..args] ) $broadcast( event, [..args] ) <child :foo.sync="bar"></child>
18. What was wrong with that? ?
19. What was wrong with that? • Not explicit enough and difficult to maintain • Doesn’t scale well with large dom trees • Can cause unsolicited side effects • Consuming, because events were propagated to every nodes within the tree.
20. Child-parent communication
21. After Vue 2.x <comp :foo="bar" @update:foo="val => bar = val"></comp> this.$emit('update:foo', newValue) Vue 2.3.0+ child parent
22. After Vue 2.x <comp :foo="bar" @update:foo="val => bar = val"></comp> this.$emit('update:foo', newValue) Vue 2.3.0+ <comp :foo.sync="bar"></comp> this.$emit('update:foo', newValue) child parent child parent
23. Communication scenarios Parent-child (and reverse)
24. Communication scenarios Parent-child (and reverse) Upwards along the parent chain Downward along the descendants Different tree branch ?
25. Global state management
26. Centralised state with VueX VueX State
27. Centralised state with VueX VueX State
28. Centralised state with VueX VueX State View User Input Render
29. Centralised state with VueX const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } }) VueX State View User Input Render store.js
30. Centralised state with VueX const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } }) VueX State View User Input Render store.commit('increment') console.log(store.state.count) // -> 1 store.js component.vue
31. What about events?
32. EventBus or EventHub
33. EventBus or EventHub
34. Event Bus in practice export const EventBus = new Vue() import { EventBus } from './event-bus.js' EventBus.$emit('i-got-clicked', this.clickCount) event-bus.js component.vue
35. Event Bus in practice export const EventBus = new Vue({ data () { return { OPEN_MENU: 'OPEN_MENU' } } }) import { EventBus } from './event-bus.js' EventBus.$emit(EventBus.OPEN_MENU) EventBus.$on(EventBus.OPEN_MENU, callbackFunc) event-bus.js component.vue
36. Summary :data.sync this.$emit() VueX State bus.$emit() bus.$on()
37. Modern invoicing and subscription billing
38. #1 world most creative agency of the year. https://careers.cle.ms
39. Thanks! @VueJsAustralia Want to give a talk? Please contact us on @VueJsAustralia