插槽
-
分类:默认插槽、具名插槽、作用域插槽
-
默认插槽:让父组件可以向子组件指定位置插入html结构,也是一种组件通信的方式,适用于父组件(App)===>子组件(MyFooter)
-
默认插槽的App组件
-
<template><div class="container"><!-- 普通写法 --><!-- title、listDate的位置为标签属性。 --><MyFooter title="游戏" :listDate="games"/> <!-- 下面都是默认插槽的书写形式--><!-- Vue会将img标签的内容解析后在传给MyFooter组件中的slot插槽中。故将普通写法:listDate="foods"删除掉 --><!-- 标签体的位置为:<MyFooter>标签体</MyFooter> --><MyFooter title="美食" ><img src="图片地址" alt=""></MyFooter> <MyFooter title="游戏" ><ul><li v-for="(item,index) in games" :key="index" >{{ item }}</li></ul></MyFooter> <MyFooter title="电影" ><!-- controls让视频可以通过点击控制播放 --><video controls src="视频地址"></video></MyFooter><router-view /></div> </template> <script> import MyFooter from './components/MyFooter.vue'; export default {name: 'App',components: { MyFooter },data() {return {foods: ['火锅', '薯条', '汉堡'],games: ['只狼', '大表哥', '黑神话悟空'],files: ['《深海》', '《战狼》', '《流浪地球》']}} } </script> <style lang="less" scoped> .container {display: flex;justify-content: space-around } img {width: 100%; } video {width: 100%; } </style>
-
默认插槽的MyFooter组件
-
<template><div class="category"><h3>{{ title }}分类</h3><!-- 普通写法 --><!-- 普通写法通过props将listDate传过来进行展示 --><ul><li v-for="(item,index) in listDate" :key="index" >{{ item }}</li> </ul><!-- 插槽写法 --><!-- <slot></slot>为默认插槽,挖个坑等使用的组件填充坑的内容 --><slot>如果图片或视频未展示,展示此处的文字</slot></div> </template> <script> export default {name: 'MyFooter',//这里保留应该只保留title,listDate仅是普通写法需求props: ['title','listDate'], } </script> <style scoped lang="css">.category {background-color: skyblue;width: 200px;height: 300px;}h3 {text-align: center;} </style>
-
具名插槽的App
-
具名插槽的给MyFooter的slot标上名字name="xxx",在App组件中使用那个插槽则slot="xxx"。进行相互匹配
-
<template><div class="container"> <!-- 有名插槽 --><!-- title的位置为标签属性。--><MyFooter title="美食" ><!-- 给img、a匹配相应的插槽名字,对应相应组件中的插槽 --><img slot="center" src="图片地址" alt=""><a slot="footer" href="网址地址">美食地址</a><a slot="footer" href="网址地址">电影地址</a></MyFooter> <MyFooter title="游戏" ><ul slot="center"><li v-for="(item,index) in games" :key="index" >{{ item }}</li></ul><div slot="footer"><a slot="footer" href="网址地址">热门推荐</a><a slot="footer" href="网址地址">网络共享</a></div></MyFooter> <MyFooter title="电影" ><!-- controls让视频可以通过点击控制播放 --><video slot="center" controls src="视频地址"></video>\<!-- template让下列的代码少了一层div 同时可以将slot="footer"去掉,改成在template标签属性的位置使用 v-slot:footer --><template><div slot="footer"><a slot="footer" href="网址地址">动漫</a><a slot="footer" href="网址地址">生活</a></div><a slot="footer" href="网址地址">动画片</a></template></MyFooter><router-view /></div> </template> <script> import MyFooter from './components/MyFooter.vue'; export default {name: 'App',components: { MyFooter },data() {return {foods: ['火锅', '薯条', '汉堡'],games: ['只狼', '大表哥', '黑神话悟空'],files: ['《深海》', '《战狼》', '《流浪地球》']}} } </script> <style lang="less" scoped> .container {display: flex;justify-content: space-around } img {width: 100%; } video {width: 100%; } </style>
-
具名插槽的MyFooter
-
<template><div class="category"><h3>{{ title }}分类</h3><!-- <slot name=""></slot>为具名插槽,挖个坑等使用的组件填充坑的内容 --><slot name="center">如果图片或视频未展示,展示此处的文字</slot><slot name="footer">如果图片或视频未展示,展示此处的文字</slot></div> </template> <script> export default {name: 'MyFooter',props: ['title'], } </script> <style scoped lang="css">.category {background-color: skyblue;width: 200px;height: 300px;}h3 {text-align: center;} </style>
-
作用域插槽理解:
1、和上面两种插槽不同,作用域插槽数据(games) 在组件(MyFooter)但数据的结构需要组件的使用者(App)来决定
2、在MyFooter通过slot传给App,App组件通过scope进行接收。
-
App组件(vm)的管家。App不仅是组件,也管理所有的组件
-
<template><div class="container"> <MyFooter title="游戏" ><!-- 要想接收MyFooter传过来的games需要写成template形式通过scope来接收传过来的值,注意这里不是scoped而是scope。 --><template scope="boy"><ul ><!-- 通过{{ games }}可以知道,只有boy.games才可以拿到数组,games是MyFooter传过来的数组是不可以修改的。 --><li v-for="(item, index) in boy.games" :key="index" >{{ item }}</li></ul></template></MyFooter> <MyFooter title="游戏" ><!-- 可以将scope="xxx"改成slot-scope="xxx"。slot-scope="xxx"是新的书写方式 --><template scope="boy"><ol ><li v-for="(item, index) in boy.games" :key="index" >{{ item }}</li></ol></template></MyFooter> <MyFooter title="游戏" ><!-- 用ES6的形式写成{games},遍历的时候可以直接写games --><template scope="{games}"><h4 v-for="(item, index) in games" :key="index" >{{ item }}</h4></template></MyFooter> <router-view /></div> </template> <script> import MyFooter from './components/MyFooter.vue'; export default {name: 'App',components: { MyFooter } } </script> <style lang="less" scoped> .container {display: flex;justify-content: space-around } img {width: 100%; } video {width: 100%; } </style>
-
作用域插槽的MyFooter组件
-
<template><div class="category"><h3>{{ title }}分类</h3><!-- :games="games"的意思是谁往插槽放数据games就传给谁 --><slot :games="games"></slot></div> </template> <script> export default {name: 'MyFooter',props: ['title','listDate'],data(){return {games: ['只狼', '大表哥', '黑神话悟空'],}}, } </script> <style scoped lang="css">.category {background-color: skyblue;width: 200px;height: 300px;}h3 {text-align: center;} </style>