本节知识点
- 插槽slot
- 作用域插槽 比如li options 等等
(一)插槽使用场景
- 父组件给子元素发送数据除了props 还能用插槽
- 子组件想渲染出来父元素给子元素的html代码,必须就需要插糟了
(二) 使用方法
- (1)没有传值，没有默认值
<body>
<div id="app">
<zujian1>
<p>插入的内容</p>
</zujian1>
</div>
</body>
<script>
let zujian1 = {
template: '<div><p>没插入内容</p><slot></slot></div>',
}
let app = new Vue({
el: "#app",
data: {
message: "Hello World!"
},
components: {
zujian1
}
})
</script>
这样页面渲染的结果就是
6.jpg
- (2)有默认值
<body>
<div id="app">
<zujian1>
</zujian1>
</div>
</body>
<script>
let zujian1 = {
template: '<div><p>没插入内容</p><slot>这个就是默认内容</slot></div>',
}
let app = new Vue({
el: "#app",
data: {
message: "Hello World!"
},
components: {
zujian1
}
})
</script>
渲染后的结果就是
7.jpg
- (3) 多个插槽
<body>
<div id="app">
<zujian1>
<header class="header" slot="header">这个就是头部</header>
<footer class="footer" slot="footer">这个就是脚步</footer>
</zujian1>
</div>
</body>
<script>
let zujian1 = {
template: `<div>
<slot name="header"></slot>
<p class="content">content</p>
<slot name="footer"></slot>
</div>`,
}
let app = new Vue({
el: "#app",
data: {
message: "Hello World!"
},
components: {
zujian1
}
})
</script>
8.jpg
作用域插糟
作用域插糟必须以template作为包裹层
<body>
<div id="app">
<zujian1>
<template slot-scope="props">
<li>{{props.item}}</li>
</template>
</zujian1>
</div>
</body>
<script>
let zujian1 = {
data() {
return {
list: [1, 2, 3, 4]
}
},
template: `<div>
<ul>
<slot v-for="(item,index) in list" :item="item">{{item}}</slot>
</ul>
</div>`,
}
let app = new Vue({
el: "#app",
data: {
message: "Hello World!"
},
components: {
zujian1
}
})
</script>
