ChingFeng
Sep 4, 2018 · 8 min read

VueJs元件篇-component(七)

指定區塊內容slots

◉應用-在component裡更換slots區域更換

=【Html】=
— — — — — — — — — — — —
<div id="app">
<framed>
<cat :name="catName"></cat>
</framed>
</div>
— — — — — — — — — — — —
=【CSS】=
— — — — — — — — — — — —
.frame{
border: 5px dashed dodgerblue;
width: 300px;
}
h3, figcaption{
font-family: sans-serif;
text-align: center;
padding: 2px 0;
width: 100%
}
— — — — — — — — — — — —
=【VueJs】=
— — — — — — — — — — — —
Vue.component('framed',{
template:
`
<div class="frame">
<h3>
Russian cat mafia employee of the month
</h3>
<slot>
Nothing framed.
</slot>
</div>
`
});
Vue.component('cat',{
template:
`
<div>
<figure>
<img src="http://placehold.it/220x220" />
<figcaption>{{name}}</figcaption>
</figure>
</div>
`,
props: ['name']
});
new Vue({
el: '#app',
data: {
names: ['Murzik', 'Pushok', 'Barsik', 'Vaska', 'Matroskin']
},
computed:{
catName(){
return this.names[Math.floor(Math.random() * this.names.length)]
}
}
});

◉進階應用-在component裡指定更換slots區域更換

=【Html】=
— — — — — — — — — — — —
<div id="app">
<organogram>
<div slot="boss">
<figure>
<img src="https://picsum.photos/210/210?image=1033" />
<figcaption>Sylvester</figcaption>
</figure>
</div>
<cat slot="employee" :name="catName"></cat>
</organogram>
</div>
— — — — — — — — — — — —
=【CSS】=
— — — — — — — — — — — —
.organogram{
border: 5px dashed dodgerblue;
width: 300px;
}
.boss{
border: 5ps double mediumvioletred;
}
.employee{
border: 2px outset lightgrey;
}
h3, figcaption{
font-family: sans-serif;
text-align: center;
padding: 2px 0;
width: 100%
}
— — — — — — — — — — — —
=【VueJs】=
— — — — — — — — — — — —
Vue.component('organogram',{
template:
`
<div class="organogram">
<h3>
Scratchy co.
</h3>
<div class="boss">
<h3>Boss</h3>
<slot name="boss">No boss</slot>
</div>
<div class="employee">
<h3>Employee</h3>
<slot name="employee">No employee</slot>
</div>
</div>
`
});
Vue.component('cat',{
template:
`
<div>
<figure>
<img src="https://picsum.photos/220/220/?random" />
<figcaption>{{name}}</figcaption>
</figure>
</div>
`,
props: ['name']
});
new Vue({
el: '#app',
data: {
names: ['Murzik', 'Pushok', 'Barsik', 'Vaska', 'Matroskin']
},
computed:{
catName(){
return this.names[Math.floor(Math.random() * this.names.length)]
}
}
});

◉進階應用-在component裡判斷更換slots區域更換

使用template scope 屬性,由scope屬性中取得object變數值,判斷哪一個slot做處理。

=【Html】=
— — — — — — — — — — — —
<div id="app">
<organogram>
<template scope="props">
<div v-if="props.type === 'boss'">
<figure>
<img src="https://picsum.photos/210/210?image=1033" />
<figcaption>Sylvester</figcaption>
</figure>
</div>
<div v-else-if="props.type === 'employee'"
:class="'r' + props.rank">
<cat :name="catName"></cat>
</div>
</template>
</organogram>
</div>
— — — — — — — — — — — —
=【CSS】=
— — — — — — — — — — — —
.organogram{
border: 5px dashed dodgerblue;
width: 300px;
}
.boss{
border: 5ps double mediumvioletred;
}
.employee{
border: 2px outset lightgrey;
}
h3, figcaption{
font-family: sans-serif;
text-align: center;
padding: 2px 0;
width: 100%
}
.r1{
font-size: 1.5em;
color: red;
}
,r2{
font-size: 1.2em;
color: blue;
}
— — — — — — — — — — — —
=【VueJs】=
— — — — — — — — — — — —
Vue.component('organogram', {
template: `<div class="organogram">
<h3>Scratchy co.</h3>
<div class="boss">
<h3>Boss</h3>
<slot type="boss">No boss</slot>
</div>
<div class="employee" v-for="rank in 2">
<h3>Employee</h3>
<slot type="employee"
:rank="rank">No employee</slot>
</div>
</div>`
});
Vue.component('cat',{
template:
`
<div>
<figure>
<img src="https://picsum.photos/220/220/?random" />
<figcaption>{{name}}</figcaption>
</figure>
</div>
`,
props: ['name']
});
new Vue({
el: '#app',
data: {
names: ['Murzik', 'Pushok', 'Barsik', 'Vaska', 'Matroskin']
},
computed:{
catName(){
return this.names[Math.floor(Math.random() * this.names.length)]
}
}
});
ChingFeng

Written by

叢林般的世界,一步步邁向未知的未來,迴盪迷途的工程師…

Object實戰

學習歷程紀錄

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade