插槽总结:
- 作用:让父组件可以向子组件指定位置插入html结构,也是一种组件之间通信的方式,适用于--父组件==》子组件。
- 分类:默认插槽、具名插槽、作用域插槽
- 使用方式
- 默认插槽
-
父组件中: <Category> <div>html结构</div> </Category> 子组件中: <template> <div> <!-- 定义插槽,等待组件的使用者使用 --> <slot>插槽默认内容</slot> </div> </template>
-
- 具名插槽
-
-
父组件中: <Category> <template slot="center"> <div>html结构1</div> </template> <template v-slot="footer"> <div>html结构2</div> </template> </Category> 子组件中: <template> <div> <!-- 定义插槽,等待组件的使用者使用 --> <slot name="center">插槽默认内容</slot>
<slot name="footer">插槽默认内容</slot>
</div>
</template>
-
-
- 作用域插槽
- 理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定)
- 具体编码:
-
<template> <div class="app"> <!-- 写法一 --> <Category title="游戏"> <template scope="mygame"> <!-- 我这就可以获取到对象了,里面包含Category.vue中的games对象哦 --> <!-- {{mygame}} --> <ul> <li v-for="(item,index) in mygame.games" :key="index">{{item}}</li> </ul> {{mygame}} </template> </Category> <!-- 写法二 --> <Category title="游戏"> <template scope="{games}"> <ol> <li v-for="(item,index) in games" style="color: brown;" :key="index">{{item}}</li> </ol> </template> </Category> <!-- 写法三 --> <Category title="游戏"> <template slot-scope="{games}"> <h3 v-for="(item,index) in games" :key="index">{{item}}</h3> </template> </Category> </div> </template> <script
-
- 默认插槽
vue默认插槽
示例一:不使用插槽
Category.vue
<template> <div class="category"> <h3>{{title}}</h3> <ul> <li v-for="(item,index) in listData" :key="index">{{item}}</li> </ul> </div> </template> <script> export default { name: 'Category', props: ['listData', 'title'], } </script> <style> .category { background-color: skyblue; width: 200px; height: 300px; } h3 { text-align: center; background-color: burlywood; } </style>
App.vue
<template> <div class="app"> <Category title="美食" :listData="foods" /> <Category title="游戏" :listData="games" /> <Category title="电影" :listData="films" /> </div> </template> <script> // 引入组件 import Category from './components/Category.vue'; export default { name: 'App', components: { Category }, data () { return { foods: ['玉米', '火鸡', '凉皮', '肉夹馍'], games: ['吃鸡', '红警', '魔兽', '超级玛丽'], films: ['大话西游', '封神榜', '三国', '大圣归来'], msg: '插槽学习喽' } }, } </script> <style scoped> .app { display: flex; justify-content: space-around; margin: 5px; } </style>
vue默认插槽 slot
示例二:
Category2.vue
<template> <div class="category"> <h3>{{title}}</h3> <!-- 定义插槽,等待组件的使用者使用 --> <slot></slot> </div> </template> <script> export default { name: 'Category2', props: ['title'], } </script> <style scope> .category { background-color: skyblue; width: 200px; height: 300px; } h3 { text-align: center; background-color: burlywood; } </style>
App.vue
<template> <div class="app"> <Category title="美食"> <img src="./assets/foods.jpeg" alt=""> </Category> <Category title="游戏" :listData="games"> <ul> <li v-for="(item,index) in games" :key="index">{{item}}</li> </ul> </Category> <Category title="电影"> <!-- <img src="./assets/films.jpg" alt=""> --> <video controls src="https://www.bilibili.com/video/BV1LX4y1H7wX/?spm_id_from=333.880.my_history.page.click"></video> </Category> </div> </template> <script> // 引入组件 // import Category from './components/Category.vue'; import Category from './components/Category2.vue'; export default { name: 'App', components: { Category }, data () { return { foods: ['玉米', '火鸡', '凉皮', '肉夹馍'], games: ['吃鸡', '红警', '魔兽', '超级玛丽'], films: ['大话西游', '封神榜', '三国', '大圣归来'], msg: '插槽学习喽' } }, } </script> <style scoped> .app { display: flex; justify-content: space-around; margin: 5px; } video { width: 100%; } img { width: 95%; height: 75%; margin-left: 5px; } </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: skyblue;
width: 200px;
height: 300px;
}
h3 {
text-align: center;
background-color: burlywood;
}
</style>
App.vue
<template> <div class="app"> <!-- {{msg}} --> <Category title="美食"> <img src="./assets/foods.jpeg" slot="center" alt=""> <a href="https://www.baidu.com/" slot="footer">百度一下</a> </Category> <Category title="游戏" :listData="games"> <ul slot="center"> <li v-for="(item,index) in games" :key="index">{{item}}</li> </ul> <div slot="footer" class="footercss"> <a href="https://www.baidu.com/">单击游戏</a> <a href="https://www.baidu.com/">网络游戏</a> </div> </Category> <Category title="电影"> <!-- <img src="./assets/films.jpg" alt=""> --> <video controls slot="center" src="https://www.bilibili.com/video/BV1LX4y1H7wX/?spm_id_from=333.880.my_history.page.click"></video> <!-- 注:slot="footer" 属性 可分别在 每个标签中设置哦 --> <!-- 第一种写法 建议使用该方式 <template slot="footer"> <div class="footercss"> <a href="https://www.baidu.com/">大圣归来</a> <a href="https://www.baidu.com/">西游记</a> <a href="https://www.baidu.com/">东游记</a> </div> <h4>欢迎前来观影</h4> </template> --> <!-- 第二种写法 v-slot: 只能在template写法 --> <template v-slot:footer> <div class="footercss"> <a href="https://www.baidu.com/">大圣归来</a> <a href="https://www.baidu.com/">西游记</a> <a href="https://www.baidu.com/">东游记</a> </div> <h4>欢迎前来观影</h4> </template> </Category> </div> </template> <script> // 引入组件 import Category from './components/Category.vue'; export default { name: 'App', components: { Category }, data () { return { foods: ['玉米', '火鸡', '凉皮', '肉夹馍'], games: ['吃鸡', '红警', '魔兽', '超级玛丽'], films: ['大话西游', '封神榜', '三国', '大圣归来'], msg: '具名插槽学习喽==》' } }, } </script> <style scoped> .app { display: flex; justify-content: space-around; margin: 5px; } .footercss { display: flex; justify-content: space-around; } video { width: 100%; } img { width: 90%; height: 70%; margin-left: 10px; } a { font-size: 13px; margin: 10px; text-align: center; } h4 { text-align: center; } </style>
作用域插槽:数据在定义插槽的地方,数据结构在使用的地方
示例三:
Category.vue
<template> <div class="category"> <h3>{{title}}</h3> <!-- 定义插槽,等待组件的使用者使用 --> <slot :games="games" :msg="msg">这里是一些默认值,当使用者没有传递具体结构时,会显示这些信息</slot> <!-- <ul> <li v-for="(item,index) in games" :key="index">{{item}}</li> </ul> --> </div> </template> <script> export default { name: 'Category', props: ['title'], data () { return { games: ['吃鸡', '红警', '魔兽', '超级玛丽'], msg: '作用域插槽第二个参数', } }, } </script> <style scoped> .category { background-color: skyblue; width: 200px; height: 300px; } h3 { text-align: center; background-color: burlywood; } </style>
App.vue
<template> <div class="app"> <!-- 写法一 --> <Category title="游戏"> <template scope="mygame"> <!-- 我这就可以获取到对象了,里面包含Category.vue中的games对象哦 --> <!-- {{mygame}} --> <ul> <li v-for="(item,index) in mygame.games" :key="index">{{item}}</li> </ul> {{mygame}} </template> </Category> <!-- 写法二 --> <Category title="游戏"> <template scope="{games}"> <ol> <li v-for="(item,index) in games" style="color: brown;" :key="index">{{item}}</li> </ol> </template> </Category> <!-- 写法三 --> <Category title="游戏"> <template slot-scope="{games}"> <h3 v-for="(item,index) in games" :key="index">{{item}}</h3> </template> </Category> </div> </template> <script> // 引入组件 import Category from './components/Category.vue'; export default { name: 'App', components: { Category }, } </script> <style scoped> .app { display: flex; justify-content: space-around; margin: 5px; } .footercss { display: flex; justify-content: space-around; } video { width: 100%; } img { width: 90%; height: 70%; margin-left: 10px; } a { font-size: 13px; margin: 10px; text-align: center; } h4 { text-align: center; } </style>
博客内容主要用于日常学习记录,内容比较随意,如有问题,还需谅解!!!