插槽的基本使用方式
- 子組件模板中使用
<slot></slot>后譬圣，父組件模板調用子組件的標簽中所寫的內容即可把這個slot替換掉
- 子組件模板中
<slot>默認的渲染模板</slot> 標簽之間的內容為默認內容旺韭。
<div id="app">
<child-item></child-item>
<child-item>用戶自定義的內容</child-item>
</div>
<script src="./js/vue.js"></script>
<script>
Vue.component("child-item", {
template: `
<div>
<slot>默認的渲染模板</slot>
</div>
`
});
const vm = new Vue({
el: "#app"
});
</script>
具名插槽的使用方式
- 為
<slot><slot>添加 name 屬性甘耿，定義一個名字 例如: <slot name="head">默認的頭部信息</slot>
- 在使用時规揪，
<template v-slot:head> <div style="background: blue;">網頁頭部</div> </template>, 通過 v-slot:name 來指定template內部的內容去替換哪個插槽悠轩，
- 注意: v-slot 是Vue2.6.0以上版本新增的標簽档泽，并且只能在 template 標簽中使用
<div id="app">
<child-item></child-item>
<child-item>
<template v-slot:head>
<div style="background: blue;">網頁頭部</div>
</template>
<template v-slot:main>
<div style="background: grey;">網站主體內容區(qū)域</div>
</template>
<template v-slot:foot>
<div style="background: orange;">網站腳注區(qū)域</div>
</template>
</child-item>
</div>
<script src="./js/vue.js"></script>
<script>
Vue.component("child-item", {
template: `
<div>
<slot name="head">默認的頭部信息</slot>
<slot name="main">默認的主體內容信息</slot>
<slot name="foot">默認的網站腳注信息</slot>
</div>
`
});
const vm = new Vue({
el: "#app"
});
</script>
作用域插槽的使用方式
- 作用域插槽為用戶提供了自定義數(shù)據(jù)顯示效果的方式
- 在
<slot></slot>標簽上添加的屬性, 例如: <slot a="1" b="2"></slot>
- 那么在使用該組件時，可以使用
<template v-slot="{ a, b }"></template>惨奕，接收到對應 a b的值
<div id="app">
<movie-list :movies="movies">
<!-- 在組件調用標簽內雪位，使用template標簽, 借助 v-slot 指令接收數(shù)據(jù) -->
<template v-slot="{ movie, index }">
<h1> {{ index }} -- {{ movie }}</h1>
</template>
</movie-list>
<movie-list :movies="movies"></movie-list>
</div>
<script src="./js/vue.js"></script>
<script>
const movieList = {
template: `
<ul>
<li v-for="(item, index) in movies" :key="index">
// 在插槽上暴露數(shù)據(jù)movie和index
<slot :movie="item" :index="index">{{ item }}</slot>
</li>
</ul>
`,
props: {
movies: Array
}
}
Vue.component("movie-list", movieList);
const vm = new Vue({
el: "#app",
data: {
movies: ["電影列表1", "電影列表2", "電影列表3", "電影列表4", "電影列表5" ]
}
});
</script>
