1.默认插槽
2.具名插槽
3.作用域插槽
插槽
① 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件和子组件间通信
② 分类：默认插槽，具名插槽，作用域插槽
一.默认插槽
① 定义一个默认插槽
② 展示
③效果
④ 代码
App.vue
<template><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="电影"><videocontrolssrc="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video></Category></div>
</template><script>
import Category from './components/Category.vue'
export default {name: 'App',data () {return {foods: ['火锅', '烧烤', '麻辣烫'],games: ['超级玛丽', '王者荣耀', '阴阳师'],films: ['《教父》', '《消失的她》']}},components: { Category }
}
// 如果本地存在就会直接从本地拿，不会去请求代理服务器
</script>
<style>
.container {display: flex;justify-content: space-around;
}
img {width: 100%;
}
video {width: 100%;
}
</style>Category.vue
<template><div class="category"><h3>{{ title }}</h3><!-- 定义一个插槽，等待组件的使用者进行填充 --><slot>默认值</slot></div>
</template><script>
export default {name: 'Category',props: ['title']
}
</script><style scoped>
.category {background-color: lightblue;width: 200px;height: 300px;
}
h3 {text-align: center;background-color: orange;
}
</style>二.具名插槽
① 定义具名插槽
② 往插槽中放入数据
③ 如果有template的话，可以写成 v-slot:footer ，v-slot 只能用到template上
④ 代码
App.Vue
<template><div class="container"><Category title="美食"><imgslot="center"src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg"alt=""/><a slot="footer" href="http://taobao.com">更多美食</a></Category><Category title="游戏"><ul slot="center"><li v-for="(item, index) in games" :key="index">{{ item }}</li></ul><div class="foot" slot="footer"><a href="http://taobao.com">单机游戏</a><a href="http://taobao.com">网络游戏</a></div></Category><Category title="电影"><videoslot="center"controlssrc="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video><template v-slot:footer><div class="foot"><a href="http://taobao.com">经典</a><a href="http://taobao.com">热门</a><a href="http://taobao.com">推荐</a></div><h4>欢迎前来观影</h4></template></Category></div>
</template><script>
import Category from './components/Category.vue'
export default {name: 'App',data () {return {foods: ['火锅', '烧烤', '麻辣烫'],games: ['超级玛丽', '王者荣耀', '阴阳师'],films: ['《教父》', '《消失的她》']}},components: { Category }
}
// 如果本地存在就会直接从本地拿，不会去请求代理服务器
</script>
<style>
.container,
.foot {display: flex;justify-content: space-around;
}
img {width: 100%;
}
video {width: 100%;
}
h4 {text-align: center;
}
</style>Category.vue
<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: lightblue;width: 200px;height: 300px;
}
h3 {text-align: center;background-color: orange;
}
</style>三.作用域插槽
① 数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定，games数据在Category中，但使用数据所遍历出来的结构由App组件决定
定义一个作用域插槽：games是传入的数据
② 往插槽中放数据（数据不在这个组件中，在别的组件中）
③ 解构写法
④ 新写法
⑤ 代码
App.vue
<template><div class="container"><Category title="游戏"><template scope="atguigu"><ul><li v-for="(item, index) in atguigu.games" :key="index">{{ item }}</li></ul></template></Category><Category title="游戏"><template scope="{games}"><ol><li v-for="(item, index) in games" :key="index">{{ item }}</li></ol></template></Category><Category title="游戏"><template slot-scope="{ games }"><h4 v-for="(item, index) in games" :key="index">{{ item }}</h4></template></Category></div>
</template><script>
import Category from './components/Category.vue'
export default {name: 'App',components: { Category }
}
// 如果本地存在就会直接从本地拿，不会去请求代理服务器
</script>
<style>
.container,
.foot {display: flex;justify-content: space-around;
}
img {width: 100%;
}
video {width: 100%;
}
h4 {text-align: center;
}
</style>Category.vue
<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: lightblue;width: 200px;height: 300px;
}
h3 {text-align: center;background-color: orange;
}
</style>
