[vue] slot插槽 默认插槽，具名插槽，作用域插槽

文章目录

• ​​插槽​​

• ​​不使用插槽​​

• ​​效果​​
• ​​分析​​

• ​​默认插槽​​

• ​​效果​​
• ​​分析​​

• ​​具名插槽​​

• ​​效果​​
• ​​分析​​

• ​​作用域插槽​​

• ​​效果​​
• ​​分析​​

• ​​再次理解作用域插槽​​
• ​​代码：​​

• ​​默认插槽：​​
• ​​具名插槽​​
• ​​作用域插槽​​

插槽

1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。
2. 分类：默认插槽、具名插槽、作用域插槽
3. 使用方式：

1. 具名插槽：

父组件中：
        <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>

1. 作用域插槽：

1. 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
2. 具体编码：

不使用插槽

效果

分析

App.vue

<template>
  <div class="container">
    <Category title="美食" :listData="foods"></Category>
    <Category title="游戏" :listData="games"></Category>
    <Category title="电影" :listData="films"></Category>
  </div>
</template>

<script>
  import Category from './components/Category'

  export default {
    name:'App',
    components:{Category},
    data() {
      return {
        foods:['火锅','烧烤','小龙虾','牛排'],
        games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
        films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']

      }
    },
        

  }
</script>

<style scoped>
  .container{
    display: flex;
    justify-content: space-around;
  }
  
</style>

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: ["title", "listData"],
};
</script>

<style></style>

默认插槽

父组件中：
        <Category>
           <div>html结构1</div>
        </Category>
        
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot>插槽默认内容...</slot>
            </div>
        </template>

效果

不止有列表，还有图片，还有视频

分析

具名插槽

效果

分析

作用域插槽

如果需要用一句话去总结作用域插槽，那就是在父组件中访问子组件的数据，或者从数据流向的角度来讲就是将 子组件 的数据传递到 父组件。

效果

分析

理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

Category.vue 子组件

App.vue 父组件

必须用template包起来，

第一个是ul列表

第二个是ol

第三个是H4标题

再次理解作用域插槽

可以直接解构

代码：

默认插槽：

Category.vue

<template>
  <div class="category">
    
    <h3>分类{{ title }}</h3>

    <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
    <slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>

  </div>
</template>

<script>
  export default {
    name: "Category",
    props: ["title"],
  };
</script>

<style>
</style>

Category.vue

<template>
  <div class="container">
    <Category title="美食">
      <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
    </Category>

    <Category title="游戏">
      <ul>
        <li v-for="(item, index) in games" :key="index">{{ item }}</li>
      </ul>
    </Category>

    <Category title="电影" >
      <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
    </Category>
  </div>
</template>

<script>
  import Category from './components/Category'

  export default {
    name:'App',
    components:{Category},
    data() {
      return {
        foods:['火锅','烧烤','小龙虾','牛排'],
        games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
        films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']
      }
    },
        

  }
</script>

<style scoped>
  .container{
    display: flex;
    justify-content: space-around;
  }
  video{
    width: 100%;
  }
</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>
</style>

App.vue

<template>
  <div class="container">
    <Category title="美食">
      <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
      <a slot="footer" href="">更多美食</a>
    </Category>

    <Category title="游戏">
      <ul  slot="center">
        <li v-for="(item, index) in games" :key="index">{{ item }}</li>
      </ul>
      <a slot="footer" href="">更多游戏</a>
    </Category>

    <Category title="电影" >
      <video  slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
      <template slot="footer">
        <div class="foot" >
          <a href="">经典</a>
          <a href="">热门</a>
          <a href="">推荐</a>
        </div>
        <h4>欢迎来观影</h4>
      </template>
    </Category>
  </div>
</template>

<script>
  import Category from './components/Category'

  export default {
    name:'App',
    components:{Category},
    data() {
      return {
        foods:['火锅','烧烤','小龙虾','牛排'],
        games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
        films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']
      }
    },
        

  }
</script>

<style scoped>
  .container,.foot{
    display: flex;
    justify-content: space-around;
  }
  video{
    width: 100%;
  }
  
</style>

作用域插槽

App.vue

<template>
  <div class="container">
    <Category title="游戏">
      <template  scope="atguigu">
        <ul>
          <li v-for="(item, index) in atguigu.games" :key="index">{{ item }}</li>
        </ul>
      </template>
    </Category>

    <Category title="游戏">
      <template  scope="atguigu">
        <ol>
          <li v-for="(item, index) in atguigu.games" :key="index">{{ item }}</li>
        </ol>
      </template>
    </Category>

    <Category title="游戏">
      <template  scope="atguigu">
        <h4>
          <li v-for="(item, index) in atguigu.games" :key="index">{{ item }}</li>
        </h4>
      </template>
    </Category>
  </div>
</template>

<script>
  import Category from './components/Category'

  export default {
    name:'App',
    components:{Category},
  }
</script>

<style scoped>
  .container,.foot{
    display: flex;
    justify-content: space-around;
  }
  video{
    width: 100%;
  }
  
</style>

Category.vue

<template>
  <div class="category">

    <h3>分类{{ title }}</h3>

    <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
    <slot :games="games">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>


  </div>
</template>

<script>
  export default {
    name: "Category",
    props: ["title"],
    data() {
      return {
        foods:['火锅','烧烤','小龙虾','牛排'],
        games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
        films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']
      }
    },
  };
</script>

<style>
</style>

---

参考：
​​​尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通​​