Vue3插槽(slot)使用方法详解

<template>
  <div class="sy-page">
    <slot></slot>
  </div>
</template>

<template>
  <sy-turning>BaiX</sy-turning>
</template>

<template>
  <div class="sy-page">
    <slot></slot>
    <a href=""><slot></slot></a>
  </div>
</template>

<template>
  <sy-turning>BaiX</sy-turning>
</template>

<slot name="xxx"></slot>

<!--子组件 -->
  <div class="tab-bar-item">
    <slot name="item-icon"></slot>
    <slot name="item-text"></slot>
  <!-- 插槽slot最终会被父组件里传入的html元素替换,
  在插槽上写样式类的东西不会生效,可以用div来包裹slot,
  利用样式继承性来完成样式修改 -->

<!--父组件 -->
  <tab-bar-item>
  
    <template v-slot:item-icon>
      <div>插槽item-icon内容<img src="#" /></div>
    </template>
  
    <template #item-text>
      <div>插槽item-text内容</div>
    </template>
    
  </tab-bar-item>

  <template>
  <!--隐含的名字“default”(默认) -->
    <p>我会被填入子组件的每个插槽</p>
  </template>

//随便定义一个方法randomName, 使用这个方法的返回值;
<a v-bind:[randomName]="user"> ... </a>

<button
  :class="[theme, isBorder]"
></button>

computed: {
  theme() {
    return this.type ? `sy-button-${this.type}` : "";
  },
  isBorder() {
    return this.border ? "is-border" : "";
  },
}

<base-layout>
  <template v-slot:[动态指令参数]>
    动态决定插入哪个插槽
  </template>
</base-layout>

<span class="current-user">
  <slot :user="data.user"></slot>
</span>

<!-- 或者 -->
<span v-for="item in data.someThing" :key="item">
  <slot :num="item.num" :awsl="item.id"></slot>
</span>

<current-user>
  <template v-slot="{ user, name }">
  <!--其实这里写的参数是什么真的无所谓, 比如我子组件传出item,
   父组件要接收item.id, 写v-slot="awsl.id"接收也可以-->
  </template>
</current-user>
<!--或者 -->
<current-user>
  <template v-slot="num"> <!-- 只传一个时不要加大括号. -->
  </template>
</current-user>

function (slotProps) {
  // 插槽内容
}

<div class="sy_tabs">
  <el-tabs>
    <el-tab-pane
      v-for="item in sy_tab_data"
      :key="item"
      :label="item.label"
      :name="item.name"
    >
      <slot :item="item"></slot>  <!--然后我们直接在这里吧item传出去,传作"item"
    </el-tab-pane>
  </el-tabs>
</div>

//我想了一下还是不要用props接收了, 我们直接把标签页数据写死吧...
export default {
  setup() {
    const sy_tab_data =  [
        { label: "推荐", name: "first", id: 0 },
        { label: "热门", name: "second", id: 1 },
        { label: "关注", name: "third", id: 2 },
      ],
  }
}

<sy-tabs>
  <template v-slot="slotProps">
  <!--然后你可以看到, 我们在这里用slotProps来接收item,
    没有任何问题, 也能拿到里面的id属性(见下); -->
    <ul>
      <li
        v-for="i in data.article_content[slotProps.item.id]"
        :key="i"
       >
       <!--这样把article_content的序号和tab的序号对应起来, 
         实现第2页显示第2个数组, 第3页显示第3个数组 -->
      </li>
    </ul>
  </template>
</sy-tabs>

let data = reactive({
  article_content: [
    [xxx, xxx], //详细数据略
    [xxx, xxx],
    [xxx, xxx],
  ]
})