vue 中<slot>插槽的使用

用简单的话来说slot就是一个占位符,就是说当我不往slot里面传递任何数据的时候,slot是不会展示的,最基本的就是保留共性

共四种情况,代码如下

父组件中

<template>
  <div class="myBox">
    <!-- 子组件不具名插槽 -->
    <my-bar>
      <!-- 必须要是用template模板,此模板中内容就是slot插槽展示内容 -->
      <template>
        <p>我是父组件的slot内容,在子组件中展示</p>
      </template>
    </my-bar>
    <!-- 子组件不具名插槽并且传参 如果设置 v-slot:default="slotData" 就表示此插槽不是具名插槽并且slotData就是不具名插槽传递的参数集合或者数据集合-->
    <my-bar>
      <!-- 必须要是用template模板,此模板中内容就是slot插槽展示内容 -->
      <template v-slot:default="slotData">
        <p>{{ slotData.name }}</p>
      </template>
    </my-bar>
    <!-- 子组件具名插槽 -->
    <my-bar>
      <!-- 使用v-slot:name 来绑定子组件的slot插槽 -->
      <template v-slot:mySlot>
        <p>我是父组件的slot内容,并且是具名插槽,在子组件中展示</p>
      </template>
    </my-bar>
    <!-- 子组件具名插槽 -->
    <my-bar>
      <!-- 使用v-slot:name="slotData" 来绑定子组件的slot插槽 slotData就是不具名插槽传递的参数集合或者数据集合-->
      <template v-slot:mySlot="slotData">
        <p>{{ slotData.name  }}</p>
      </template>
    </my-bar>
  </div>
</template>

子组件中

<template>
  <div class="clildrenSlot">
    <!-- 不具名插槽 -->
    <slot :slotData="slotData"> </slot>
    <!-- 具名插槽 -->
    <slot name="mySlot" :slotData="slotData"> </slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      slotData: { name: '我是插槽' },
    };
  },
};
</script>