oddEVEN
We provide marketing technology, front end and software development consulting to bring your digital marketing and ecommerce projects to the next level.
@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
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!
Vue.js - Component Composition
By oddEVEN
