Vue插槽---默认插槽、具名插槽、作用域插槽

浅浅的花香味﹌ 2024-04-06 10:08 238阅读 0赞

目录

总结

1.默认插槽

2.具名插槽

3.作用域插槽

一、不使用插槽的效果

App.vue

Category.vue

二、默认插槽

App.vue

Category.vue

三、具名插槽

App.vue

Category.vue

四、作用域插槽

App.vue

Category.vue

总结

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

分类：默认插槽、具名插槽、作用域插槽

使用：

1.默认插槽

553842c8a0aa48d7818f0fd4f521d57e.png

2.具名插槽

6ecc18298ed44b37afceaaafe4e80a31.png

3.作用域插槽

作用域插槽也可以有名字

理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定

fbe4f97ea69b43958fb3acaf27f8b7b3.png

ecdb041c3bad41ddb673edf9c491d394.png

一、不使用插槽的效果

4bda280d818a4dc2ae5ec93bc829b7b9.png

App.vue

  1. <template>
  3.    <div class="container">
  4.       <Category title="美食" :listData="foods" ></Category>
  5.       <Category title="游戏" :listData="games"></Category>
  6.       <Category title="电影" :listData="films"></Category>
  7.    </div>
  8. </template>
  10. <script>
  11. import Category from './components/Category.vue';
  13.    export default{
  14.     name:"App",
  15.     data(){
  16.       return{
  17.         foods:['火锅','烧烤','小龙虾','牛排'],
  18.         games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
  19.         films:['《教父》','《拆弹专家》','《你好，李焕英》']
  20.       }
  21.     },
  22.     components: { 
  23.         Category 
  24.     }
  25. }
  27. </script>
  29. <style lang="css">
  30.     .container{
  31.         /* 弹性布局 */
  32.         display: flex;
  33.         /*  */
  34.         justify-content: space-around;
  35.     }
  36. </style>

Category.vue

  1. <template>
  2.     <div class="category">
  3.         <h3>{
  4.    {title}}分类</h3>
  5.         <ul>
  6.             <li v-for="(item,index) in listData" :key="index">{
  7.    {item}}</li>
  8.         </ul>
  9.     </div>
  10. </template>
  12. <script>
  14.    export default{
  15.       name:'Category',
  16.       props:['listData','title']
  17.    }
  18. </script>
  21. <style scoped>
  22.     .category{
  23.         background-color:skyblue ;
  24.         width:200px;
  25.         height:300px;
  26.     }
  27.     h3{
  28.         text-align:center;
  29.         background-color: orange;
  30.     }
  31. </style>

二、默认插槽

69c37ddc4a994b198ffbbe84206f9147.png

App.vue

  1. <template>
  3.    <div class="container">
  4.       <Category title="美食" >
  5.         <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
  6.       </Category>
  8.       <Category title="游戏" >
  9.         <ul>
  10.             <li v-for="(g,index) in games" :key="index">{
  11.    {g}}</li>
  12.         </ul>
  13.       </Category>
  15.       <Category title="电影">
  16.         <!-- controls 就可以播放了 -->
  17.        <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
  18.       </Category>
  19.    </div>
  20. </template>
  22. <script>
  23. import Category from './components/Category.vue';
  25.    export default{
  26.     name:"App",
  27.     data(){
  28.       return{
  29.         foods:['火锅','烧烤','小龙虾','牛排'],
  30.         games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
  31.         films:['《教父》','《拆弹专家》','《你好，李焕英》']
  32.       }
  33.     },
  34.     components: { 
  35.         Category 
  36.     }
  37. }
  39. </script>
  41. <style lang="css">
  43.     .container{
  44.         /* 弹性布局 */
  45.         display: flex;
  46.         /*  */
  47.         justify-content: space-around;
  48.     }
  49. </style>

#

Category.vue

  1. <template>
  2.     <div class="category">
  3.         <h3>{
  4.    {title}}分类</h3>
  5.         <!-- 插槽 挖个坑，等着别人来这里 -->
  6.         <slot>我是默认值，当使用者没有传递具体结构时，我会出现</slot>
  8.     </div>
  9. </template>
  11. <script>
  13.    export default{
  14.       name:'Category',
  15.       props:['title']
  16.    }
  17. </script>
  20. <style scoped>
  21.         video{
  22.         width: 100%;
  23.     }
  24.     img{
  25.         width: 100%;
  26.     }
  27.     .category{
  28.         background-color:skyblue ;
  29.         width:200px;
  30.         height:300px;
  31.     }
  32.     h3{
  33.         text-align:center;
  34.         background-color: orange;
  35.     }
  36. </style>

三、具名插槽

f8173521ab3641c7a463f9732c8a2cc5.png

App.vue

  1. <template>
  3.    <div class="container">
  4.       <Category title="美食" >
  5.         <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
  6.         <a slot="footer" href="http://www.atguigu.com">更多美食</a>
  7.       </Category>
  9.       <Category title="游戏" >
  10.         <ul slot="center">
  11.             <li v-for="(g,index) in games" :key="index">{
  12.    {g}}</li>
  14.         </ul>
  15.         <div class="foot" slot="footer">
  16.             <a  href="http://www.atguigu.com">单机游戏</a>
  17.             <a href="http://www.atguigu.com">网络游戏</a>
  18.         </div>
  19.       </Category>
  21.       <Category title="电影">
  22.         <!-- controls 就可以播放了 -->
  23.        <video  slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
  24.        <div class="foot" slot="footer">
  25.             <a  href="http://www.atguigu.com">经典</a>
  26.             <a href="http://www.atguigu.com">热门</a>
  27.             <a  href="http://www.atguigu.com">推荐</a>
  28.         </div>
  29.       </Category>
  30.    </div>
  31. </template>
  33. <script>
  34. import Category from './components/Category.vue';
  36.    export default{
  37.     name:"App",
  38.     data(){
  39.       return{
  40.         foods:['火锅','烧烤','小龙虾','牛排'],
  41.         games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
  42.         films:['《教父》','《拆弹专家》','《你好，李焕英》']
  43.       }
  44.     },
  45.     components: { 
  46.         Category 
  47.     }
  48. }
  50. </script>
  52. <style lang="css">
  54.     .container,.foot{
  55.         /* 弹性布局 */
  56.         display: flex;
  57.         /*  */
  58.         justify-content: space-around;
  59.     }
  60. </style>

#

Category.vue

  1. <template>
  2.     <div class="category">
  3.         <h3>{
  4.    {title}}分类</h3>
  5.         <!-- 插槽 挖个坑，等着别人来这里 -->
  6.         <slot name="center">我是默认值，当使用者没有传递具体结构时，我会出现</slot>
  7.         <slot name="footer">我是默认值，当使用者没有传递具体结构时，我会出现</slot>
  9.     </div>
  10. </template>
  12. <script>
  14.    export default{
  15.       name:'Category',
  16.       props:['title']
  17.    }
  18. </script>
  21. <style scoped>
  22.         video{
  23.         width: 100%;
  24.     }
  25.     img{
  26.         width: 100%;
  27.     }
  28.     .category{
  29.         background-color:skyblue ;
  30.         width:200px;
  31.         height:300px;
  32.     }
  33.     h3{
  34.         text-align:center;
  35.         background-color: orange;
  36.     }
  37. </style>

四、作用域插槽

62d24bfac7c447c88fdaf2a3bf5683d4.png

App.vue

  1. <template>
  3.    <div class="container">
  6.       <Category title="游戏" >
  7.         <!-- 这个时候template必须要用 要把它包裹起来才可以收到Category组件发过来的内容 -->
  8.         <!-- scope 这个时候没有 d   scope="games"把收过来的数据命名为games-->
  9.         <template scope="games">
  10.           <ul slot="center">
  11.             <li v-for="(g,index) in games.games" :key="index">{
  12.    {g}}</li>
  13.         </ul>
  14.         </template>
  15.       </Category>
  17.       <Category title="游戏" >
  18.         <template scope="games">
  19.           <ol slot="center">
  20.             <li v-for="(g,index) in games.games" :key="index">{
  21.    {g}}</li>
  22.         </ol>
  23.         </template>
  24.       </Category>
  26.       <Category title="游戏" >
  27.         <template scope="{games}">
  28.           <!-- es6写法 这样写之后 ，下面就不用写games. 了 -->
  29.           <h4 v-for="(g,index) in games" :key="index">{
  30.    {g}}</h4>
  32.         </template>
  33.       </Category>
  38.    </div>
  39. </template>
  41. <script>
  42. import Category from './components/Category.vue';
  44.    export default{
  45.     name:"App",
  47.     components: { 
  48.         Category 
  49.     }
  50. }
  52. </script>
  54. <style lang="css">
  56.     .container,.foot{
  57.         /* 弹性布局 */
  58.         display: flex;
  59.         /*  */
  60.         justify-content: space-around;
  61.     }
  62. </style>

Category.vue

  1. <template>
  2.     <div class="category">
  3.         <h3>{
  4.    {title}}分类</h3>
  5.         <!-- 插槽 挖个坑，等着别人来这里 -->
  6.         <!-- 谁往这个插槽中放东西，这个:games="games"  msg="hello"就传给谁
  7.              这个地方是可以传递多个值的  -->
  8.         <slot :games="games" msg="hello">我是默认值，当使用者没有传递具体结构时，我会出现</slot>
  11.     </div>
  12. </template>
  14. <script>
  16.    export default{
  17.       name:'Category',
  18.       props:['title'],
  19.       data(){
  20.         return{
  21.           games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
  22.         }
  23.        },
  24.    }
  25. </script>
  28. <style scoped>
  29.         video{
  30.         width: 100%;
  31.     }
  32.     img{
  33.         width: 100%;
  34.     }
  35.     .category{
  36.         background-color:skyblue ;
  37.         width:200px;
  38.         height:300px;
  39.     }
  40.     h3{
  41.         text-align:center;
  42.         background-color: orange;
  43.     }
  44. </style>

发表评论

表情：
评论列表 （有 0 条评论，238人围观）

还没有评论，来说两句吧...

相关阅读