【Vue】第十六部分插槽（默认插槽、具名插槽、作用域插槽）

文章目录

【Vue】第十六部分插槽（默认插槽、具名插槽、作用域插槽）
16 . 插槽
- 16.1 默认插槽
- - 16.1.1 不使用插槽的案例图示
  - 16.1.2 默认插槽
  - 16.1.3 默认插槽的结构和案例
- 16.2 具名插槽
- - 16.2.1 具名插槽案例示图
  - 16.2.2 具名插槽的结构和案例
- 16.3 作用域插槽
- - 16.3.1 案例示图
总结

16 . 插槽

作用：父组件可以在子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件

16.1 默认插槽

16.1.1 不使用插槽的案例图示

App组件

<template><div class="box"><category :listdata = "food" title="美食"></category><category :listdata = "game" title="游戏"></category><category :listdata = "movie" title="电影"></category></div>
</template><script>
import Category from './components/category.vue'
export default {components:{Category},data(){return{food:["兰州拉面","烤羊肉","披萨","锅边糊"],game:["英雄联盟","和平精英","原神","我的世界"],movie:["你好,李焕英","西虹市首富","这个杀手不太冷静","拳王妈妈"]}}
}
</script><style>
.box{display: flex;justify-content: space-around;
}</style>

category组件

<template><div class="wrapper"><h1>{{title}}</h1><ul><li v-for="(list,index) in listdata" :key="index">{{list}}</li></ul></div>
</template><script>
export default {props:["listdata","title"]
}
</script><style scoped>.wrapper{width: 400px;height:500px;background-color: bisque;}h1{text-align: center;margin-bottom: 60px;}ul{padding: 0;}li{text-align: center;list-style: none;font-size: 30px;margin-top: 20px;}
</style>

16.1.2 默认插槽

需求：给美食加图片，给电影加视频，游戏不变

16.1.3 默认插槽的结构和案例

在父组件中使用子组件标签，在子组件标签中写html结构，html结构将根据slot（插槽）的位置进行插入

父组件：
<category><div>html结构</div>
</category>子组件：
<category>//定义插槽<slot>可以指定默认内容</slot>
</category>

App.vue

<template><div class="box"><category title="美食"><img          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg09.viwik.com%2Fimages%2F20180701%2Ftooopen_sy_052538253829965.jpg&refer=http%3A%2F%2Fimg09.viwik.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648649484&t=4396d8c36bd8f4802c6ad8498ca83cca" alt=""></category><category title="游戏"><ul><li v-for="(g,index) in game" :key="index">{{g}}</li></ul></category><category title="电影"><video controls src="https://www.bilibili.com/bangumi/play/ep430726?spm_id_from=333.1007.partition_recommend"></video></category></div>
</template><script>
import Category from './components/category.vue'
export default {components:{Category},data(){return{food:["兰州拉面","烤羊肉","披萨","锅边糊"],game:["英雄联盟","和平精英","原神","我的世界"],movie:["你好,李焕英","西虹市首富","这个杀手不太冷静","拳王妈妈"]}}
}
</script><style>
.box{display: flex;justify-content: space-around;
}</style>

category组件

<template><div class="wrapper"><h1>{{title}}</h1><slot></slot></div>
</template><script>
export default {props:["title"]
}
</script><style scoped>.wrapper{width: 400px;height:500px;background-color: bisque;}h1{text-align: center;margin-bottom: 60px;}ul{padding: 0;}li{text-align: center;list-style: none;font-size: 30px;margin-top: 20px;}img{width: 100%;}video{width: 100%;}
</style>

16.2 具名插槽

16.2.1 具名插槽案例示图

定义：顾名思义就是给插槽取名

需求：使用多个插槽分别放在中间和和底部

16.2.2 具名插槽的结构和案例

和默认插槽相比就是多了个取名，将html结构放到指定的插槽里

父组件：
<category><template slot = "xxx"><div>html结构</div></template>
</category><category><template v-slot:yyy>  //注意：v-slot只能在template中使用<div>html结构</div></template>
</category>子组件：
<category>//定义插槽<slot name = "xxx">可以指定默认内容</slot><slot name = "yyy">可以指定默认内容</slot>
</category>

App组件

<template><div class="box"><category title="美食"><!-- 使用slot --><img slot="center" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg09.viwik.com%2Fimages%2F20180701%2Ftooopen_sy_052538253829965.jpg&refer=http%3A%2F%2Fimg09.viwik.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648649484&t=4396d8c36bd8f4802c6ad8498ca83cca" alt=""><div class="food"  slot="footer"><a href="#" target="_blank" class="food">更多美食</a></div></category><category title="游戏"><ul slot="center">  //使用插槽<li v-for="(g,index) in game" :key="index">{{g}}</li></ul><div slot="footer" class="foot"><a href="#" target="_blank">热门</a><a href="#" target="_blank">更多</a></div></category><category title="电影"><video slot="center" controls    src="https://v.qq.com/x/cover/mzc00200a1yhq29.html?sf=uri"></video><!-- 在这里说一下2.6版本引入的，v-slot:插槽名，但是只能使用在template上 --><template v-slot:footer><div class="inter"><a href="#" target="_blank">推荐</a><a href="#" target="_blank">最近上映</a><a href="#" target="_blank">热门</a></div><h4 slot="footer">欢迎来影院观看！</h4></template></category></div>
</template><script>
import Category from './components/category.vue'
export default {components:{Category},data(){return{food:["兰州拉面","烤羊肉","披萨","锅边糊"],game:["英雄联盟","和平精英","原神","我的世界"],movie:["你好,李焕英","西虹市首富","这个杀手不太冷静","拳王妈妈"]}}
}
</script><style>
.box,.foot,.inter{display: flex;justify-content: space-around;
}.foot,.inter{margin: 0 auto;margin-top: 50px ;width: 100px;font-size: 20px;
}
.food{margin-top: 50px;text-align: center;
}
.inter{width: 200px;
}
h4{text-align: center;
}</style>

category组件

<template><div class="wrapper"><h1>{{title}}</h1>     <!-- 具名插槽也就是给插槽取名字下面的写法就是给slot取名--><slot name="center"></slot><slot name="footer"></slot>      </div>
</template><script>
export default {props:["title"]
}
</script><style scoped>.wrapper{width: 400px;height:500px;background-color: bisque;}h1{text-align: center;margin-bottom: 60px;}ul{padding: 0;}li{text-align: center;list-style: none;font-size: 30px;margin-top: 20px;}img{width: 100%;}video{width: 100%;}
</style>

16.3 作用域插槽

games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定

适用：数据不在操作的组件中，可以通过作用域插槽进行通信

说明：

scope取的名可以随便取名
返回的是一个对象,所以在使用的时候是 Tree.games
scope必须要配合template使用才可以
作用域插槽也可以取名

16.3.1 案例示图

需求：遍历不同的结构，且数据不在App组件中，在game组件中

App组件

<template><div class="box"><game title="游戏">// 接收插槽传入的数据 <template scope="Tree"><ul><li v-for="(g,index) in Tree.games" :key="index">{{g}}</li></ul></template></game><game title="游戏"><template scope="Tree"><ol><li v-for="(g,index) in Tree.games" :key="index">{{g}}</li></ol></template></game><game title="游戏"><template scope="Tree"><h4 v-for="(g,index) in Tree.games" :key="index">{{g}}</h4>       </template></game></div>
</template><script>
import game from "./components/game.vue"
export default {components:{game}
}
</script><style>.box{display: flex;justify-content: space-around;}
</style>

game组件

<template><div class="wrapper"><h2>{{title}}</h2><slot :games="games"></slot></div>
</template><script>
export default {props:["title"],data(){return{games:["和平精英","原神","英雄联盟","饥荒"]}}
}
</script><style scoped>.wrapper{width: 300px;height: 400px;background-color: antiquewhite;text-align: center;}ul,ol{padding:0;text-align: left;font-size: 20px;padding-left: 30px;}</style>

总结

以上就是今天要讲的内容，本文介绍了默认插槽、具名插槽、作用域插槽的使用方法，希望对大家有所帮助！

【Vue】第十六部分插槽（默认插槽、具名插槽、作用域插槽）相关推荐

Vue（十六）：Vue3+ts 入门
Vue3 项目构建动态参数 lodash 计算属性侦听器 (watch.watchEffect) v-for 在组件上使用 v-for 复选框.选择框.lazy.number Attribute ...
【vue3】使用JSX实现普通、具名和作用域插槽
最近在vue3构建的项目中使用到了JSX(不得不说JSX用起来的感觉就是清爽).但是前段时间遇到了一个问题,vue template中的slot插槽如何在JSX中实现呢?查了很久资料.文档都很难找到一 ...
前端学习（1894）vue之电商管理系统电商系统之通过作用域插槽操作列
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
Vue默认插槽、具名插槽、作用域插槽及使用作用域插槽删除列表项
Vue默认插槽.具名插槽.作用域插槽及使用作用域插槽删除列表项 1. 默认插槽父组件标签内写的所有内容都放在插槽中父组件: <h1>我是父组件</h1><base-b ...
[vue] slot插槽默认插槽，具名插槽，作用域插槽
文章目录插槽不使用插槽效果分析默认插槽效果分析具名插槽效果分析作用域插槽效果分析再次理解作用域插槽代码: 默认插槽: 具名插槽作用域插槽插槽作用:让父组件可以向子组 ...
【Vue2.0】—默认插槽、具名插槽、作用域插槽（二十四）
[Vue2.0]-默认插槽.具名插槽.作用域插槽(二十四) 默认插槽.具名插槽 Cateory.vue文件 <template><div class="cateory&qu ...
Vue —— 进阶插槽（slot）（默认插槽、具名插槽和作用域插槽）
Vue全家桶系列文章目录内容参考链接 Vue2.x - 基础 Vue2.x - 基础 Vue2.x - 进阶(零) 初始化脚手架 Vue2.x - 进阶(一) refs属性.props配置项 V ...
六十三、Vue中非父子(兄弟)组件间传值，插槽的使用和作用域插槽（非常重要）
2020/10/18 . 周日.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/18 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...
Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】
插槽Vue.js官网介绍:https://vuejs.org/guide/components/slots.html 会牵涉到template的用法.占位.实际不渲染到页面中 1.默认插槽: 1.1 ...

【Vue】第十六部分插槽（默认插槽、具名插槽、作用域插槽）

【Vue】第十六部分插槽（默认插槽、具名插槽、作用域插槽）

文章目录

16 . 插槽

16.1 默认插槽

16.1.1 不使用插槽的案例图示

16.1.2 默认插槽

16.1.3 默认插槽的结构和案例

16.2 具名插槽

16.2.1 具名插槽案例示图

16.2.2 具名插槽的结构和案例

16.3 作用域插槽

16.3.1 案例示图

总结

【Vue】第十六部分插槽（默认插槽、具名插槽、作用域插槽）相关推荐

最新文章

热门文章

【Vue】 第十六部分 插槽（默认插槽、具名插槽、作用域插槽）

【Vue】 第十六部分 插槽（默认插槽、具名插槽、作用域插槽）

文章目录

16 . 插槽

16.1 默认插槽

16.1.1 不使用插槽的案例图示

16.1.2 默认插槽

16.1.3 默认插槽的结构和案例

16.2 具名插槽

16.2.1 具名插槽案例示图

16.2.2 具名插槽的结构和案例

16.3 作用域插槽

16.3.1 案例示图

总结

【Vue】 第十六部分 插槽（默认插槽、具名插槽、作用域插槽）相关推荐

最新文章

热门文章

【Vue】第十六部分插槽（默认插槽、具名插槽、作用域插槽）

【Vue】第十六部分插槽（默认插槽、具名插槽、作用域插槽）

【Vue】第十六部分插槽（默认插槽、具名插槽、作用域插槽）相关推荐