插槽的使用，插槽是什么？如何使用？

最新推荐文章于 2024-08-15 18:19:19 发布

奈何59

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量260

点赞数 3

文章标签：前端 vue

本文链接：https://blog.csdn.net/weixin_67185986/article/details/137115573

版权

概念：

插槽是Vue组件的一种机制，允许父组件向子组件插入内容

分类：

默认插槽，具名插槽，作用域插槽

使用：

1 - 默认插槽

父组件：

<template>
  <div class="box"> 
    <ListComponent title="美食">
      <img src="https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF" alt=""/>
    </ListComponent>

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

    <ListComponent title="车的">
      <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
    </ListComponent>
  </div>
</template>

<script>
//引入子组件
import ListComponent from "@/components/list/index.vue";

export default {
  name: "user",
    data() {
    return {
      games: ["王者荣耀", "qq飞车", "开心消消乐"],
    };
  },
},

 components: {
  ListComponent
 },
</script>

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

子组件：

<template>
    <div class="listBox">
        <h3>{{ title }}分类</h3>
        <!-- 使用slot标签来决定放在哪个位置 -->
        <slot></slot>
    </div>
</template>
<script>
export default{
    name:"list",
    props:["title"],
    data() {
        return {
           
        }
    },
    components:{
        
    }
}
</script>
<style scoped>
.listBox{
    width: 200px;
    height: 400px;
    background-color: #409EFF;
    
}
h3{
    text-align: center;
    background-color: pink;
}
</style>

结果：

2 - 具名插槽：同一子组件ListComponent,使用多次，插入不同内容

父组件：

<template>
  <div class="box">
    <ListComponent title="美食">
      <!-- 写法一：slot="插槽名" -->
      <img src="https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF" alt="" slot="center">
      <div class="foot" slot="footer">
          <a href="">吃饭</a>
          <a href="">睡觉</a>
          <a href="">打豆豆</a>
        </div>
    </ListComponent>

    <ListComponent title="游戏">
      <ul slot="center">
        <li v-for="(item, index) in games" :key="index">{{ item }}</li>
      </ul>
      <!-- 写法二：template标签和v-slot:插槽名必须同时使用，template用于包裹，减少不必要的代码  -->
      <template v-slot:footer>
        <div class="foot">
          <a href="">吃饭</a>
          <a href="">睡觉</a>
          <a href="">打豆豆</a>
        </div>
        <h4>~~加油~加油~</h4>
      </template>
    </ListComponent>

    <ListComponent title="车">
      <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" slot="center"></video>
      <div class="foot" slot="footer">
          <a href="">吃饭</a>
          <a href="">睡觉</a>
          <a href="">打豆豆</a>
        </div>
    </ListComponent>
  </div>
</template>

<script>
import ListComponent from "@/components/list/index.vue"
export default {
  name: "user",
  data() {
    return {
      games: ["王者荣耀", "qq飞车", "开心消消乐"],
    };
  },
  components: {
    ListComponent
  },
  methods: {

  },
  beforeDestroy() {

  },
  mounted() {

  },
}
</script>
<style scoped>
.box,.foot {
  display: flex;
  justify-content: space-around;
}

img {
  width: 100%;
}

video {
  width: 100%;
}


</style>

子组件：

<template>
    <div class="listBox">
        <h3>{{ title }}分类</h3>
        <!-- name:"插槽名"  使用name给插槽起名字，必须是name，别的不行！！！ -->
        <slot name="center"></slot>
        <slot name="footer"></slot>
    </div>
</template>
<script>
export default{
    name:"list",
    props:["title"],
    data() {
        return {
           
        }
    },
    components:{
        
    }
}
</script>
<style scoped>
.listBox{
    width: 200px;
    height: 400px;
    background-color: #409EFF;
    
}
h3{
    text-align: center;
    background-color: pink;
}
</style>

结果：

1 - 作用域插槽：父组件使用子组件中的数据，此刻产生作用域，通过传参来实现

父组件：

<template>
  <div class="box">
    <ListComponent title="美食">
      <!-- 返回的是一个对象，结构拿到games -->
      <template scope="{games}">
        <ul>
          <li v-for="(item, index) in games" :key="index">{{ item }}</li>
        </ul>
      </template>
    </ListComponent>

   <ListComponent title="美食">
      <template scope="{games}">
        <ol>
          <li v-for="(item, index) in games" :key="index">{{ item }}</li>
        </ol>
      </template>
    </ListComponent>

    <ListComponent title="美食">
      <template scope="{games}">
          <h4 v-for="(item, index) in games" :key="index">{{ item }}</h4>
      </template>
    </ListComponent>
  </div>
</template>

<script>
import ListComponent from "@/components/list/index.vue"
export default {
  name: "user",
  data() {
    return {

    };
  },
  components: {
    ListComponent
  },
  methods: {

  },
  beforeDestroy() {

  },
  mounted() {

  },
}
</script>
<style scoped>
.box,
.foot {
  display: flex;
  justify-content: space-around;
}

img {
  width: 100%;
}

video {
  width: 100%;
}
</style>

子组件：

<template>
    <div class="listBox">
        <h3>{{ title }}分类</h3>
       <!-- 通过  :key=value  来向父组件传参 -->
        <slot :games="games"></slot>
    </div>
</template>
<script>
export default{
    name:"list",
    props:["title"],
    data() {
        return {
            //父组件要用到games
            games: ["王者荣耀", "qq飞车", "开心消消乐"],
        }
    },
    components:{
        
    }
}
</script>
<style scoped>
.listBox{
    width: 200px;
    height: 400px;
    background-color: #409EFF;
    
}
h3{
    text-align: center;
    background-color: pink;
}
</style>

结果：