@aleksejdix

<Card 
    :title="title"
    :image="image"
    :body="body"
    :url="url"
/>

🤔

@aleksejdix

<Card data="card"/>

🥴

@aleksejdix

<card :url="url">
  <card-title>{{title}}</card-title>
  <card-image :src="src" :alt="alt"/>
  <card-body>{{ body }}</card-body>
</card>

😻

similar to html

@aleksejdix

Vue Slots & Components
COmposition

 Aleksej Dix

 Front End Developer

@aleksejdix

aleksej.dix@oddeven.ch

https://oddeven.ch

LOGIN

Username

Password

YES

do you accept
🍪?

YES

are you sure that you don't want
some 🍪?

OK

can we send you push notifications📢 ?

SUBSCRIBE

subscribe to our daily newsletter

@aleksejdix

<br />
<hr />
<img />
<nav></nav>
<h1></h1>
<a></a>

self-closing

normal

@aleksejdix

<br />
<hr />
<img />
<nav></nav>
<h1></h1>
<a></a>

void-elements

self closing

normal

@aleksejdix

<my-paragraph :text="text"/>

without slot

PARENT

props
slots
scoped slots
attrs
listeners

@aleksejdix

ng-content

children

slot

slot

<dialog>

  <slot></slot>

<dialog>

declare a slot

CHILD

<my-component>

  <h1>slot</h1>

</my-component>

use a slot

h1

PARENT

<dialog>
  <slot name="header"></slot>
  <slot name="body"></slot>
  <slot name="footer"></slot>
</dialog>

slot NAmes

CHILD

@aleksejdix

<my-modal>
    <h1 slot="header">{{title}}</h1>
    <img slot="body" src="accordion"/>
    <div slot="footer">
        <button>ok</button>
    </div>
</my-modal>

USE slot NAmes

PARENT

@aleksejdix

simple Example

<button>
  <slot>ok</slot>
</button>

<My-Button>
  send
</My-Button>

declare

use

PARENT

CHILD

@aleksejdix

name Example

<button>
  <slot name="left"></slot>
  <slot>ok</slot>
  <slot name="right"></slot>
</button>

<My-Button>
  <Icon slot="left"></Icon>
  send
</My-Button>

PARENT

CHILD

 

@aleksejdix

$Slots input

<div
    // $slots[name]
    v-if="$slots.default"
>
    <h1>
        <slot></slot>
    </h1>
</div>

CHILD

@aleksejdix

Scoped Slots

@aleksejdix

@aleksejdix

templateRef

render props

scoped slots

nope 😱

props
slots
scoped slots
attrs
listeners

props
slots
scoped slots
attrs
listeners

props

🤯

<slot :text="text"/>

PAssing DATA from Child to the Parent

CHILD

<My-Modal>
  <template slot-scope="props">
   {{ props.text }}
  </template>
</My-Modal>

Slot-Scope

PARENT

<My-Modal> 
  <template slot-scope="{text}">
   {{ text }}
  </template>
</My-Component>

ES6 Destructuring

PARENT

<template>
  <dialog> 
    <slot 
      :text="text" 
      :close="$emit('close')"
    ></slot>
  </dialog>
</template>

PAssing actions from Child to the Parent

CHILD

<My-Modal @close="open = false"> 
  <template slot-scope="{text, close}">
    {{ text }}
    <button @click="close"></button>
  </template>
</My-Modal>

Child and the Parent are
Visually oN the same level

PARENT

@aleksejdix

Broken REactivity

lifecycle.js

function updateChildComponent () {
  ...
  if (hasChildren) {
    vm.$slots = resolveSlots(
        renderChildren, 
        parentVnode.context
    )
    vm.$forceUpdate()
  }
}

Proven patterns for building
Vue apps

WORKSHOP BY CHRIS FRITZ
 

4 March 2019

🖖

in Zürich

VUE.JS CORE TEAM MEMBER

THANKS!

 Aleksej Dix

 Front End Developer

@aleksejdix

aleksej.dix@oddeven.ch

https://oddeven.ch