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

    目录

    总结

          1.默认插槽

          2.具名插槽

          3.作用域插槽

    一、不使用插槽的效果

     App.vue

    Category.vue

    二、默认插槽

    App.vue

    Category.vue

    三、具名插槽

    App.vue

    Category.vue

    四、作用域插槽

    App.vue

    Category.vue

    总结

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

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

        使用：

          1.默认插槽

     

          2.具名插槽

     

          3.作用域插槽

              作用域插槽也可以有名字

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

          

     

     

    一、不使用插槽的效果

     App.vue

    1. <template>
    2.    
    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>
    9.  
    10. <script>
    11. import Category from './components/Category.vue';
    12.  
    13.    export default{
    14.     name:"App",
    15.     data(){
    16.       return{
    17.         foods:['火锅','烧烤','小龙虾','牛排'],
    18.         games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
    19.         films:['《教父》','《拆弹专家》','《你好，李焕英》']
    20.       }
    21.     },
    22.     components: { 
    23.         Category 
    24.     }
    25. }
    26.  
    27. script>
    28.  
    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>{{title}}分类h3>
    4.         <ul>
    5.             <li v-for="(item,index) in listData" :key="index">{{item}}li>
    6.         ul>
    7.     div>
    8. template>
    9.  
    10. <script>
    11.  
    12.    export default{
    13.       name:'Category',
    14.       props:['listData','title']
    15.    }
    16. script>
    17.  
    18.  
    19. <style scoped>
    20.     .category{
    21.         background-color:skyblue ;
    22.         width:200px;
    23.         height:300px;
    24.     }
    25.     h3{
    26.         text-align:center;
    27.         background-color: orange;
    28.     }
    29. style>

    二、默认插槽

    App.vue

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

    Category.vue

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

    三、具名插槽

    App.vue

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

    Category.vue

    1. <template>
    2.     <div class="category">
    3.         <h3>{{title}}分类h3>
    4.         
    5.         <slot name="center">我是默认值，当使用者没有传递具体结构时，我会出现slot>
    6.         <slot name="footer">我是默认值，当使用者没有传递具体结构时，我会出现slot>
    7.  
    8.     div>
    9. template>
    10.  
    11. <script>
    12.  
    13.    export default{
    14.       name:'Category',
    15.       props:['title']
    16.    }
    17. script>
    18.  
    19.  
    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>

    四、作用域插槽

     

    App.vue

    1. <template>
    2.    
    3.    <div class="container">
    4.  
    5.  
    6.       <Category title="游戏" >
    7.         
    8.         
    9.         <template scope="games">
    10.           <ul slot="center">
    11.             <li v-for="(g,index) in games.games" :key="index">{{g}}li>
    12.         ul>
    13.         template>
    14.       Category>
    15.  
    16.       <Category title="游戏" >
    17.         <template scope="games">
    18.           <ol slot="center">
    19.             <li v-for="(g,index) in games.games" :key="index">{{g}}li>
    20.         ol>
    21.         template>
    22.       Category>
    23.  
    24.       <Category title="游戏" >
    25.         <template scope="{games}">
    26.           
    27.           <h4 v-for="(g,index) in games" :key="index">{{g}}h4>
    28.  
    29.         template>
    30.       Category>
    31.  
    32.  
    33.  
    34.  
    35.    div>
    36. template>
    37.  
    38. <script>
    39. import Category from './components/Category.vue';
    40.  
    41.    export default{
    42.     name:"App",
    43.  
    44.     components: { 
    45.         Category 
    46.     }
    47. }
    48.  
    49. script>
    50.  
    51. <style lang="css">
    52.      
    53.     .container,.foot{
    54.         /* 弹性布局 */
    55.         display: flex;
    56.         /*  */
    57.         justify-content: space-around;
    58.     }
    59. style>

    Category.vue

    1. <template>
    2.     <div class="category">
    3.         <h3>{{title}}分类h3>
    4.         
    5.         
    6.         <slot :games="games" msg="hello">我是默认值，当使用者没有传递具体结构时，我会出现slot>
    7.  
    8.  
    9.     div>
    10. template>
    11.  
    12. <script>
    13.  
    14.    export default{
    15.       name:'Category',
    16.       props:['title'],
    17.       data(){
    18.         return{
    19.           games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
    20.         }
    21.        },
    22.    }
    23. script>
    24.  
    25.  
    26. <style scoped>
    27.         video{
    28.         width: 100%;
    29.     }
    30.     img{
    31.         width: 100%;
    32.     }
    33.     .category{
    34.         background-color:skyblue ;
    35.         width:200px;
    36.         height:300px;
    37.     }
    38.     h3{
    39.         text-align:center;
    40.         background-color: orange;
    41.     }
    42. style>

  • 相关阅读:
    动态规划和递归法求解斐波那契数列
    【python】TypeError: unhashable type: ‘list‘ 解决方法——简单示例
    微服务框架 SpringCloud微服务架构 22 DSL 查询语法 22.4 地理查询
    Hive 知识点八股文记录 ——（二）优化
    java文件传输简单方法
    Vue3 + ts + jest 单元测试 配置以及使用
    Nacos作为配置中心详解
    OSPF协议LSDB同步过程和邻居状态机
    内存管理之内存寻址(笔记)
    Leetcode 951. 翻转等价二叉树
  • 原文地址：https://blog.csdn.net/weixin_51351637/article/details/126908028