<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最終會(huì)被父組件里傳入的html元素替換,
  在插槽上寫樣式類的東西不會(huì)生效,可以用div來(lái)包裹slot,
  利用樣式繼承性來(lái)完成樣式修改 -->

<!--父組件 -->
  <tab-bar-item>
  
    <template v-slot:item-icon>
      <div>插槽item-icon內(nèi)容<img src="#" /></div>
    </template>
  
    <template #item-text>
      <div>插槽item-text內(nèi)容</div>
    </template>
    
  </tab-bar-item>

  <template>
  <!--隱含的名字“default”(默認(rèn)) -->
    <p>我會(huì)被填入子組件的每個(gè)插槽</p>
  </template>

//隨便定義一個(gè)方法randomName, 使用這個(gè)方法的返回值;
<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:[動(dòng)態(tài)指令參數(shù)]>
    動(dòng)態(tài)決定插入哪個(gè)插槽
  </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 }">
  <!--其實(shí)這里寫的參數(shù)是什么真的無(wú)所謂, 比如我子組件傳出item,
   父組件要接收item.id, 寫v-slot="awsl.id"接收也可以-->
  </template>
</current-user>
<!--或者 -->
<current-user>
  <template v-slot="num"> <!-- 只傳一個(gè)時(shí)不要加大括號(hào). -->
  </template>
</current-user>

function (slotProps) {
  // 插槽內(nèi)容
}

<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接收了, 我們直接把標(biāo)簽頁(yè)數(shù)據(jù)寫死吧...
export default {
  setup() {
    const sy_tab_data =  [
        { label: "推薦", name: "first", id: 0 },
        { label: "熱門", name: "second", id: 1 },
        { label: "關(guān)注", name: "third", id: 2 },
      ],
  }
}

<sy-tabs>
  <template v-slot="slotProps">
  <!--然后你可以看到, 我們?cè)谶@里用slotProps來(lái)接收item,
    沒(méi)有任何問(wèn)題, 也能拿到里面的id屬性(見(jiàn)下); -->
    <ul>
      <li
        v-for="i in data.article_content[slotProps.item.id]"
        :key="i"
       >
       <!--這樣把a(bǔ)rticle_content的序號(hào)和tab的序號(hào)對(duì)應(yīng)起來(lái), 
         實(shí)現(xiàn)第2頁(yè)顯示第2個(gè)數(shù)組, 第3頁(yè)顯示第3個(gè)數(shù)組 -->
      </li>
    </ul>
  </template>
</sy-tabs>

let data = reactive({
  article_content: [
    [xxx, xxx], //詳細(xì)數(shù)據(jù)略
    [xxx, xxx],
    [xxx, xxx],
  ]
})