卡片元件
1
2
3
|
<div id="app">
<card-component></card-component>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
const app = Vue.createApp({ })
app.component('card-component',{
data(){
return{
count: 2
}
},
template:`
<div class="card">
<div class="card-header">卡片標題</div>
<div class="card-body">
<p class="card-text">卡片內容</p>
</div>
<div class="card-footer text-muted">卡片底部</div>
</div>
`
})
app.mount("#app");
|
卡片元件＋不具名slot
1
2
3
4
5
|
<div id="app">
<card-component>
<p>這是我自訂的內容</p>
</card-component>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
const app = Vue.createApp({ })
app.component('card-component',{
data(){
return{
count: 2
}
},
template:`
<div class="card">
<div class="card-header">卡片標題</div>
<div class="card-body">
<p class="card-text">
<slot><slot>
</p>
</div>
<div class="card-footer text-muted">卡片底部</div>
</div>
`
})
app.mount("#app");
|
卡片元件＋具名slot
1
2
3
4
5
6
7
|
<div id="app">
<card-component>
<template v-slot:header>自定義的標題</template>
<template v-slot:default>自定義的內容</template>
<template v-slot:footer>自定義的底部</template>
</card-component>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
const app = Vue.createApp({})
app.component('card-component',{
data(){
return{
count: 2
}
},
template:`
<div class="card">
<div class="card-header">
<slot name="header">卡片標題</slot>
</div>
<div class="card-body">
<p class="card-text">
<slot>卡片內容</slot>
</p>
</div>
<div class="card-footer text-muted">
<slot name="footer">卡片底部</slot>
</div>
</div>
`
})
app.mount("#app");
|
縮寫：
1
2
3
4
5
6
7
|
<div id="app">
<card-component>
<template #header>自定義的標題</template>
<template #default>自定義的內容</template>
<template #footer>自定義的底部</template>
</card-component>
</div>
|
如果沒有寫對應的<template v-slot>，就會顯示原本的內容
跳窗元件＋具名slot＋props傳物件
1
2
3
4
5
6
7
|
<div id="app">
<alert-component>
<template #slot-alert="responeText">
{{ responeText.responeText.message }}
</template>
</alert-component>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
const app = Vue.createApp({ })
app.component('alert-component',{
data(){
return{
responeText:{
message: "註冊失敗",
}
}
},
template:`
<div class="alert alert-warning">
<slot name="slot-alert" :responeText="responeText">卡片預設內容文字</slot>
</div>
`
})
app.mount("#app");
|
slot插巢就不用寫props
跳窗元件＋具名slot＋props傳物件(進階)
1
2
3
4
5
6
7
8
|
<div id="app">
<alert-component :text="text">
<template #default="{ text, text2 }">
{{ text }}
{{ text2 }}
</template>
</alert-component>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
const app = Vue.createApp({
data(){
return{
text: "這是父層元件的文字"
}
}
})
app.component('alert-component',{
props:["text"],
data(){
return{
text2: "這是子元件的文字"
}
},
template:`
<div class="alert alert-warning">
<slot :text="text" :text2="text2">13123</slot>
</div>
`
})
app.mount("#app");
|
其他相關