Vue中的插槽(Slot)技术详解

一、引言

Vue.js是一款流行的前端框架，提供了强大的组件化功能。其中，插槽(Slot)技术是一种用于组件化开发的重要技术，允许我们在组件中定义一些占位符，然后在使用组件时，通过插槽来传递内容。插槽的灵活性使得我们可以轻松地定制组件的外观和行为，可以帮助我们更好地处理组件的可复用性和灵活性。

二、插槽基础使用

在Vue中，插槽的使用方式可以分为三种：默认插槽、具名插槽和作用域插槽。

1. 默认插槽

默认插槽是最简单的插槽形式，它允许我们将组件的内容传递到组件内部的一个占位符中。在组件的模板中使用定义默认插槽，然后在使用组件时，将内容传递给这个插槽。

// Com01.vue
<template>
  <h2>学习插槽</h2>
  <div>
    <slot>我是默认插槽，没给我传内容就会默认显示这句话</slot>
  </div>
</template>

// 父组件App.vue
<template>
  <Com01>
    <p>你好，世界!</p>
    <!-- <p>你好，世界!</p> -->
  </Com01>
</template>

<script setup>
import Com01 from './components/Com01.vue'
</script>

在上面的代码示例中，<slot></slot>表示一个默认插槽，将传递给Com01组件的内容放置在这个插槽中。如果把p标签那一行注释掉，就会显示默认内容。

2. 具名插槽

具名插槽允许我们在组件中定义多个插槽，并且可以根据插槽的名称来传递内容。在组件的模板中使用<slot name="slotName"></slot>定义具名插槽，然后在使用组件时，使用<template v-slot:slotName>或者<template slot="slotName">来传递内容给指定的插槽。

// 子组件 Com02.vue
<template>
  <div>
    <slot name="header"></slot>
    <div class="content">
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

// 父组件 App.vue
<template>
  <Com02>
    <template v-slot:header>
      <h2>我是头部内容!</h2>
    </template>
    <h2>你好，世界!</h2>
    <template v-slot:footer>
      <h2>我是底部内容!</h2>
    </template>
  </Com02>
</template>

<script setup>
import Com02 from './components/Com02.vue'
</script>

3. 作用域插槽

作用域插槽是一种特殊的插槽，它允许我们在插槽内部访问组件实例的数据，允许父组件将数据传递到子组件中，并在子组件中使用。在组件的模板中使用<slot name="slotName" v-bind:slotData="data"></slot>定义作用域插槽，并在使用组件时，使用<template slot="slotName" v-slot="scope">来访问插槽内部的数据。

// 子组件 Category.vue
<template>
  <div class="category">
    <h3>{{title}}分类组件</h3>
    <slot :foods="foods" :games="games" :films="films">我是插槽1</slot>
  </div>
</template>

<script>
export default {
  name: "Category",
  props: ["title"],
  data(){
    return {
      foods: ["红烧肉","番茄炒蛋","鱼香肉丝"],
      games: ["红色警戒", "穿越火线", "魔兽世界"],
      films: ["肖申克的救赎", "火影忍者", "泰坦尼克号"]
    }
  }
}
</script>

// 父组件 App.vue
<template>
  <div class="container">
    <Category title="食物" >
      <template v-slot="scope">
        {{ scope }}
      </template>
    </Category>
  </div>
</template>

<script>
import Category from './components/Category.vue'
export default {
  name: "App",
  components: {Category},
}
</script>

可以看到父组件中拿到的scope就是一个对象，包括了子组件中传来的三个数组，我们可以自己选择展示哪些数据。

// 父组件 App.vue
<template>
  <div class="container">
    <Category title="食物" >
      <template v-slot="scope">
        <ul>
          <li v-for="item in scope.foods">{{ item }}</li>
        </ul>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from './components/Category.vue'
export default {
  name: "App",
  components: {Category},
}
</script>

三、插槽的高级用法

1. 具名作用域插槽

具名作用域插槽的工作方式也是类似的，插槽props可以作为v-slot指令的值被访问到：v-slot:header="props"，也可以直接缩写成#header="props"，这是缩写形式。

// 子组件 Category02.vue
<template>
  <div class="category">
    <h3>{{title}}分类组件</h3>
    <slot name="header" :foods="foods" >我是插槽1</slot>
    <slot name="center" :games="games" >我是插槽2</slot>
    <slot name="footer" :films="films" >我是插槽3</slot>
  </div>
</template>

<script>
export default {
  name: "Category",
  props: ["title"],
  data(){
    return {
      foods: ["红烧肉","番茄炒蛋","鱼香肉丝"],
      games: ["红色警戒", "穿越火线", "魔兽世界"],
      films: ["肖申克的救赎", "火影忍者", "泰坦尼克号"]
    }
  }
}
</script>

// 父组件 App.vue
<template>
  <div class="container">
    <Category title="食物游戏电影" >
      <template v-slot:header="scope">
        <ul>
          <li v-for="item in scope.foods">{{ item }}</li>
        </ul>
      </template>
      <template v-slot:center="props">
        <ul>
          <li v-for="(item,index) in props.games" :key="index">{{ item }}</li>
        </ul>
      </template>
      <template #footer="scope">
        <ul slot="center">
          <li v-for="(item,index) in scope.films" :key="index">{{ item }}</li>
        </ul>
      </template>
    </Category>
  
  </div>
  
</template>

<script>
import Category from './components/Category02.vue'
export default {
  name: "App",
  components: {Category},
}
</script>

2. 动态插槽名

动态插槽是一种动态地选择插槽名称的方式。我们可以根据组件的状态或属性来决定使用哪个插槽，可以动态地决定将内容插入到哪个具名插槽中。

// 子组件 Com06.vue 
<template>
  <div>
    <button @click="toggleSlot">切换插槽</button>
    <slot :name="currentSlot"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentSlot: 'default666',
    };
  },
  methods: {
    toggleSlot() {
      this.currentSlot = this.currentSlot === 'default666' ? 'custom666' : 'default666';
    },
  },
};
</script>

// 父组件 App.vue
<template>
  <div>
    <Com06>
      <template v-slot:default666>
        <p>这是默认内容!</p>
      </template>
      <template v-slot:custom666>
        <p>这是自定义内容!</p>
      </template>
    </Com06>
  </div>
</template>

<script>
import Com06 from './components/Com06.vue'
export default {
  name: "App",
  components: {Com06},
}
</script>

我们在组件中添加了一个按钮，并在按钮的点击事件处理程序中切换currentSlot的值。当按钮被点击时，currentSlot的值会从default切换到custom，或者从custom切换到default，从而实现默认内容和自定义内容的切换。

在父组件中使用这个组件时，可以根据currentSlot的值来动态地指定插槽名称。

3. 插槽内容的访问

可以通过this.$slots访问到插槽的内容。

<template>
  <div>
    <button @click="toggleSlot">切换插槽</button>
    <slot :name="currentSlot"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentSlot: 'default666',
    };
  },
  methods: {
    toggleSlot() {
      console.log("this.$slots: ", this.$slots);
      console.log("this.$slots.default666: ", this.$slots.default666);
      console.log("this.$slots.custom666: ", this.$slots.custom666);
    },
  },
};
</script>

四、插槽的本质

其实从打印结果可以看出，slot本质就是Proxy代理的对象，属性名就是各个插槽的名字，属性值就是对应的函数，调用函数得到的结果就是虚拟结点。

<slot name="slot1"></slot>就相当于在调用属性名为slot1的函数，<slot name="slot2" msg="你好世界!"></slot>就相当于在调用属性名为slot2的函数，该函数接收了msg的参数。

插槽的注意事项

• 插槽内容可以是任意类型，包括HTML、组件等。
• 默认插槽可以不用写name属性，具名插槽必须写name属性。
• 作用域插槽传递的数据可以根据需要命名。

五、最后的话

插槽技术是Vue.js中重要的组件化特性之一，为我们提供了灵活的组件化开发方式，通过合理使用插槽，我们可以轻松地定制和扩展组件的功能，使组件的可复用性和灵活性大大提高。

能力一般，水平有限，本文可能存在纰漏或错误，如有问题欢迎指正，感谢你阅读这篇文章，如果你觉得写得还行的话，不要忘记点赞、评论、收藏哦！祝生活愉快！