目录
- 1. slot插槽
- 1.1 默认插槽
- 1.2 具名插槽
- 1.3 作用域插槽
1. slot插槽
作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件向子组件传递数据
1.1 默认插槽
Category.vue:
- 定义一个插槽。等着组件的使用者进行填充
- 可以在子组件Category.vue给插入的html结构定义CSS样式,也可以在父组件App.vue给插入的html结构定义CSS样式
<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: 200px;}h3{text-align: center;background-color: orange;}video{width: 100%;}img{width: 100%;}
</style>
App.vue:直接在使用子组件的标签中,插入html结构,同时可以传递数据到html。如果子组件不定义slot插槽,则插入的html结构保存在子组件的$slots上
<template><div class="container"><Category title="风景" ><img src="https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF" alt=""></Category><Category title="游戏" ><ul><li v-for="(game,index) in games" :key="index">{{game}}</li></ul></Category><Category title="电影"><video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video></Category></div>
</template><script>import Category from './components/Category'export default {name:'App',components:{Category},data() {return {games:['红色警戒','穿越火线']}}}
</script><style scoped>.container{display: flex;/*主轴对其,每个元素之间分配相同的空间*/justify-content: space-around;}
</style>
显示效果如下:
1.2 具名插槽
Category.vue:给slot定义name属性,区分不同的插槽
<template><div class="category"><h3>{{title}}分类</h3><slot name="center">我是一些默认值,当使用者没有传递具体结构时,center插槽会出现</slot><slot name="footer">我是一些默认值,当使用者没有传递具体结构时,footer插槽会出现</slot></div>
</template><script>export default {name:'Category',props:['title']}
</script><style scoped>.category{background-color: skyblue;width: 200px;height: 300px;}h3{text-align: center;background-color: orange;}video{width: 100%;}img{width: 100%;}
</style>
App.vue:
- 通过slot属性将html结构放入不同的slot插槽
- 可以将多个标签直接放入相同name的插槽
- 使用template可以将多个标签放入slot插槽,还不用多一层标签。v-slot只能在template标签上使用
<template><div class="container"><Category title="风景" ><img slot="center" src="https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF" alt=""><!-- 可以将多个标签直接放入相同name的插槽 --><a slot="footer" href="http://www.baidu.com">更多风景</a></Category><Category title="游戏" ><ul slot="center"><li v-for="(game,index) in games" :key="index">{{game}}</li></ul><div class="foot" slot="footer"><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:footer><div class="foot"><a href="http://www.baidu.com">经典</a><a href="http://www.baidu.com">热门</a></div><h4>欢迎前来观影</h4></template></Category></div>
</template><script>import Category from './components/Category'export default {name:'App',components:{Category},data() {return {games:['红色警戒','穿越火线']}}}
</script><style scoped>.container,.foot{display: flex;justify-content: space-around;}h4{text-align: center;}
</style>
显示效果如下:
1.3 作用域插槽
理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。例如games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定
Category.vue:将多个属性以object的方式,传递给slot的使用者
<template><div class="category"><h3>{{title}}分类</h3><slot :games="games" msg="游戏很好玩吧">我是默认的一些内容</slot></div>
</template><script>export default {name:'Category',props:['title'],data() {return {games:['红色警戒','穿越火线'],}},}
</script><style scoped>.category{background-color: skyblue;width: 200px;height: 200px;}h3{text-align: center;background-color: orange;}
</style>
App.vue:slot的使用者接收数据,然后将数据以不同的html结构插入到slot插槽
<template><div class="container"><Category title="游戏"><!-- slot的使用者接收数据 --><template v-slot="obj"><ul><li v-for="(game,index) in obj.games" :key="index">{{game}}</li></ul><h4>{{obj.msg}}</h4></template></Category><Category title="游戏"><template v-slot="{games}"><ol><li style="color:red" v-for="(game,index) in games" :key="index">{{game}}</li></ol></template></Category><Category title="游戏"><template v-slot="{games}"><h4 v-for="(game,index) in games" :key="index">{{game}}</h4></template></Category></div>
</template><script>import Category from './components/Category'export default {name:'App',components:{Category},}
</script><style scoped>.container{display: flex;justify-content: space-around;}h4{text-align: center;}
</style>
效果如下: