Tweet
Tweet

Slide 1

Slide 1 text

Communication between Vue components @VueJsAustralia

Slide 2

Slide 2 text

@maoosi @_maoosi Sylvain Simao Technical Lead @ Clemenger BBDO Melb.

Slide 3

Slide 3 text

Components?

Slide 4

Slide 4 text

DOM The entire UI can be abstracted into a tree of components

Slide 5

Slide 5 text

Break UI into components, responsible for managing a piece of DOM Nav Content Item Sidebar

Slide 6

Slide 6 text

Break UI into components, responsible for managing a piece of DOM Nav Content Item Sidebar

Slide 7

Slide 7 text

Components in practice

Slide 8

Slide 8 text

Components in practice

Slide 9

Slide 9 text

Communicating between components

Slide 10

Slide 10 text

Communication scenarios

Slide 11

Slide 11 text

Communication scenarios Parent-child (and reverse)

Slide 12

Slide 12 text

Communication scenarios Parent-child (and reverse) Upwards along the parent chain

Slide 13

Slide 13 text

Communication scenarios Parent-child (and reverse) Upwards along the parent chain Downward along the descendants

Slide 14

Slide 14 text

Communication scenarios Parent-child (and reverse) Upwards along the parent chain Downward along the descendants Different tree branch

Slide 15

Slide 15 text

Before Vue 2.x $dispatch( event, [..args] )

Slide 16

Slide 16 text

Before Vue 2.x $dispatch( event, [..args] ) $broadcast( event, [..args] )

Slide 17

Slide 17 text

Before Vue 2.x $dispatch( event, [..args] ) $broadcast( event, [..args] )

Slide 18

Slide 18 text

What was wrong with that? ?

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

Child-parent communication

Slide 21

Slide 21 text

After Vue 2.x bar = val"> this.$emit('update:foo', newValue) Vue 2.3.0+ child parent

Slide 22

Slide 22 text

After Vue 2.x bar = val"> this.$emit('update:foo', newValue) Vue 2.3.0+ this.$emit('update:foo', newValue) child parent child parent

Slide 23

Slide 23 text

Communication scenarios Parent-child (and reverse)

Slide 24

Slide 24 text

Communication scenarios Parent-child (and reverse) Upwards along the parent chain Downward along the descendants Different tree branch ?

Slide 25

Slide 25 text

Global state management

Slide 26

Slide 26 text

Centralised state with VueX VueX State

Slide 27

Slide 27 text

Centralised state with VueX VueX State

Slide 28

Slide 28 text

Centralised state with VueX VueX State View User Input Render

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

What about events?

Slide 32

Slide 32 text

EventBus or EventHub

Slide 33

Slide 33 text

EventBus or EventHub

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Summary :data.sync this.$emit() VueX State bus.$emit() bus.$on()

Slide 37

Slide 37 text

Modern invoicing and subscription billing

Slide 38

Slide 38 text

#1 world most creative agency of the year. https://careers.cle.ms

Slide 39

Slide 39 text

Thanks! @VueJsAustralia Want to give a talk? Please contact us on @VueJsAustralia