Vue基础19之插槽

插槽

不使用插槽

App.vue

<template><div class="bg"><Category :listData="food"  title="美食"/><Category :listData="games" title="游戏"/><Category :listData="movies" title="电影"/></div>
</template><script>
import Category from "@/components/Category";
export default {name: "App",components: {Category},data(){return{food:["火锅","烧烤","小龙虾","牛排"],games:["红色警戒","穿越火线","劲舞团","超级玛丽"],movies:["《教父》","《拆弹专家》","《你好，李焕英》","《无间道》"]}},methods:{}
}
</script><style lang="less">
.bg{display: flex;justify-content: space-around;margin-top: 100px;
}
</style>

Category.vue

<template><div class="bg"><h1>{{title}}</h1><ul><li v-for="(item,index) in listData" :key="index">{{item}}</li></ul></div>
</template><script>export default {name: "Category",props:["listData","title"]}
</script><style scoped lang="less">
.bg{height: 500px;width: 300px;background-color: skyblue;display: inline-block;h1{background-color: orange;text-align: center;}
}
</style>

默认插槽：slot

<Category title="美食"><img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
</Category>

    <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充）   --><slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>

图片链接：
https://s3.ax1x.com/2021/01/16/srJlq0.jpg
视频链接：
http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4

App.vue

<template><div class="bg"><Category title="美食"><img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""></Category><Category title="游戏"><ul><li v-for="(g,index) in games" :key="index">{{g}}</li></ul></Category><Category title="电影"><video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video></Category><Category title="测试默认情况"></Category></div>
</template><script>
import Category from "@/components/Category";
export default {name: "App",components: {Category},data(){return{food:["火锅","烧烤","小龙虾","牛排"],games:["红色警戒","穿越火线","劲舞团","超级玛丽"],movies:["《教父》","《拆弹专家》","《你好，李焕英》","《无间道》"]}},methods:{}
}
</script><style lang="less">
.bg{display: flex;justify-content: space-around;margin-top: 100px;img{width: 100%;}video{width: 100%;}
}
</style>

Category.vue

<template><div class="bg"><h1>{{title}}</h1><!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充）   --><slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot></div>
</template><script>export default {name: "Category",props:["title"]}
</script><style scoped lang="less">
.bg{height: 500px;width: 300px;background-color: skyblue;display: inline-block;h1{background-color: orange;text-align: center;}
}
</style>

具名插槽

<Category title="美食"><img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""><a slot="footer"  href="http://www.baidu.com" class="more">更多美食</a>
</Category>

<!-- 定义多个插槽（挖个坑，等着组件的使用者进行填充）   --><slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot><slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>

App.vue

<template><div class="bg"><Category title="美食"><img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""><a slot="footer"  href="http://www.baidu.com" class="more">更多美食</a></Category><Category title="游戏"><ul slot="center"><li v-for="(g,index) in games" :key="index">{{g}}</li></ul><div slot="footer" class="foot"><a href="http://www.baidu.com/">单机游戏</a><a href="http://www.baidu.com/">网络游戏</a></div></Category><Category title="电影"><video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video><!--  只有template标签可以使用v-slot:xxx 的形式   --><template v-slot:footer><div class="foot"><a href="http://www.baidu.com">经典</a><a href="http://www.baidu.com">热门</a><a href="http://www.baidu.com">推荐</a></div><h4 class="welcome">欢迎前来观影！</h4></template></Category></div>
</template><script>
import Category from "@/components/Category";
export default {name: "App",components: {Category},data(){return{food:["火锅","烧烤","小龙虾","牛排"],games:["红色警戒","穿越火线","劲舞团","超级玛丽"],movies:["《教父》","《拆弹专家》","《你好，李焕英》","《无间道》"]}},methods:{}
}
</script><style lang="less">
.bg{display: flex;justify-content: space-around;margin-top: 100px;img{width: 100%;}video{width: 100%;}.more{display: block;text-align: center;margin-top: 10px;}.foot{display: flex;justify-content: space-around;}.welcome{text-align: center;}
}
</style>

Category.vue

<template><div class="bg"><h1>{{title}}</h1><!-- 定义多个插槽（挖个坑，等着组件的使用者进行填充）   --><slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot><slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot></div>
</template><script>export default {name: "Category",props:["title"]}
</script><style scoped lang="less">
.bg{height: 500px;width: 300px;background-color: skyblue;display: inline-block;h1{background-color: orange;text-align: center;}
}
</style>

作用域插槽

给使用者传值

<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充）   --><slot :games="games">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>

使用者通过template中的scope获取值

<template scope="obj"><ul><li v-for="(g,index) in obj.games" :key="index">{{g}}</li></ul>
</template>

App.vue

<template><div class="bg"><Category title="游戏"><template scope="obj"><ul><li v-for="(g,index) in obj.games" :key="index">{{g}}</li></ul></template></Category><Category title="游戏"><template scope="{games}"><ol><li style="color: red;" v-for="(g,index) in games" :key="index">{{g}}</li></ol></template></Category><Category title="游戏"><template slot-scope="{games}"><h4   v-for="(g,index) in games" :key="index">{{g}}</h4></template></Category></div>
</template><script>
import Category from "@/components/Category";
export default {name: "App",components: {Category},
}
</script><style lang="less">
.bg{display: flex;justify-content: space-around;margin-top: 100px;img{width: 100%;}video{width: 100%;}.more{display: block;text-align: center;margin-top: 10px;}.foot{display: flex;justify-content: space-around;}.welcome{text-align: center;}h4{text-align: center;}
}
</style>

Category.vue

<template><div class="bg"><h1>{{title}}</h1><!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充）   --><slot :games="games">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot></div>
</template><script>export default {name: "Category",props:["title"],data(){return{games:["红色警戒","穿越火线","劲舞团","超级玛丽"]}}}
</script><style scoped lang="less">
.bg{height: 500px;width: 300px;background-color: skyblue;display: inline-block;h1{background-color: orange;text-align: center;}
}
</style>

总结

1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件
2. 分类：默认插槽、具名插槽、作用域插槽
3. 使用方式：
   （1）默认插槽：
   父组件中：

<Category><div>html结构1</div>
</Category>

子组件中：

<template><div><!-- 定义插槽 --><slot>插槽默认内容</slot></div>
</template>

（2）具名插槽：
父组件中：

<Category><template slot="center"><div>html结构1</div></template><template v-slot:footer><div>html结构2</div></template>
</Category>

子组件中：

<template><div><!-- 定义插槽--><slot name="center">插槽默认内容...</slot><slot name="footer">插槽默认内容...</slot></div>
</template>

（3）作用域插槽
①理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
②具体编码：
父组件中：

<Category><template scope="scopeData"><!--生成的是ul列表--><ul><li v-for="g in scopeData.games" :key="g">{{g}}</li></ul></template>
</Category><Category><template slot-scope="scopeData"><!--生成的是h4标题--><h4 v-for="g in scopeData.games" :key="g">{{g}}</h4></template>
</Category>

子组件中：

<template><div><slot :games="games"></slot></div>
</template><script>export default {name: "Category",props:["title"],data(){return{games:["红色警戒","穿越火线","劲舞团","超级玛丽"]}}}
</script>