20. 插槽
- 作用: 让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于
父组件===>子组件 - 分类: 默认插槽,具名插槽,作用域插槽
使用方式:
默认插槽:
父组件中
<template> <div id="root"> <div class="container"> <Category title="美食"> <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="烧烤"> </Category> <Category title="游戏"> <ul> <li v-for="(item,index) in games" :key="index">{{ item }}</li> </ul> </Category> <Category title="电影" :listData="films"> <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video> </Category> </div> </div> </template> <script> import Category from "./components/Category"; export default { name: "App", components:{Category}, data(){ return{ foods:['火锅','烧烤','小龙虾','牛排'], games:['红色警戒','穿越火线','劲舞团','超级玛丽'], films:['<<教父>>','<<拆弹专家>>','<<你好,李焕英>>','<<尚硅谷>>'] } } } </script> <style> .container{ display: flex; justify-content: space-between; } </style>子组件中
<template> <div class="category"> <h3>{{title}}分类</h3> <!--使用默认插槽--> <slot>我是默认插槽,当使用组件是没有传入结构是我就会显示</slot> </div> </template> <script> export default { name: "Category", props:['title'] } </script> <style scoped> .category{ background-color: skyblue; width: 200px; height: 300px; padding-top: 5px; } h3{ text-align: center; background-color: orange; } img { width: 100%; } video{ width: 100%; } </style>
具名插槽
父组件中
<template> <div id="root"> <div class="container"> <Category title="美食"> <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="烧烤"> <a slot="footer" href="http://www.chengxuyi.top">更多美食</a> </Category> <Category title="游戏"> <ul slot="center"> <li v-for="(item,index) in games" :key="index">{{ item }}</li> </ul> <div slot="footer" class="foot"> <a href="http://www.chengxuyi.top">单击游戏</a> <a href="http://www.chengxuyi.top">网络游戏</a> </div> </Category> <Category title="电影" :listData="films"> <video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video> <template v-slot:footer> <div class="foot"> <a href="http://www.chengxuyi.top">经典</a> <a href="http://www.chengxuyi.top">热门</a> <a href="http://www.chengxuyi.top">推荐</a> </div> <h4>欢迎来观影!</h4> </template> </Category> </div> </div> </template> <script> import Category from "./components/Category"; export default { name: "App", components:{Category}, data(){ return{ foods:['火锅','烧烤','小龙虾','牛排'], games:['红色警戒','穿越火线','劲舞团','超级玛丽'], films:['<<教父>>','<<拆弹专家>>','<<你好,李焕英>>','<<尚硅谷>>'] } } } </script> <style> .container{ display: flex; justify-content: space-around; } .foot{ text-align: center; display: flex; justify-content: space-around; } h4{ text-align: center; } </style>子组件中
<template> <div class="category"> <h3>{{title}}分类</h3> <!--使用默认插槽--> <slot name="center">我是默认插槽,当使用组件是没有传入结构是我就会显示</slot> <slot name="footer">我是默认插槽,当使用组件是没有传入结构是我就会显示</slot> </div> </template> <script> export default { name: "Category", props:['title'] } </script> <style scoped> .category{ background-color: skyblue; width: 200px; height: 300px; padding-top: 5px; } h3{ text-align: center; background-color: orange; } img { width: 100%; } video{ width: 100%; } </style>
作用域插槽
父组件中
<template> <div id="root"> <div class="container"> <Category title="游戏"> <template v-slot="{games}"> <ul> <li v-for="(item,index) in games" :key="index">{{ item }}</li> </ul> </template> </Category> <Category title="游戏"> <template v-slot="scope"> <ol> <li v-for="(item,index) in scope.games" :key="index">{{ item }}</li> </ol> </template> </Category> <Category title="游戏"> <template v-slot="scope"> <h4 v-for="(item,index) in scope.games" :key="index">{{ item }}</h4> </template> </Category> </div> </div> </template> <script> import Category from "./components/Category"; export default { name: "App", components:{Category}, } </script> <style> .container{ display: flex; justify-content: space-around; } .foot{ text-align: center; display: flex; justify-content: space-around; } h4{ text-align: center; } </style>子组件中
<template> <div class="category"> <h3>{{title}}分类</h3> <!--使用默认插槽--> <slot :games="games">我是默认插槽,当使用组件是没有传入结构是我就会显示</slot> </div> </template> <script> export default { name: "Category", props:['title'], data(){ return{ games:['红色警戒','穿越火线','劲舞团','超级玛丽'], } } } </script> <style scoped> .category{ background-color: skyblue; width: 200px; height: 300px; padding-top: 5px; } h3{ text-align: center; background-color: orange; } img { width: 100%; } video{ width: 100%; } </style>
