<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內(nèi)容<img src="#" /></div>
    </template>
  
    <template #item-text>
      <div>插槽item-text內(nèi)容</div>
    </template>
    
  </tab-bar-item>

  <template>
  <!--隱含的名字“default”(默認(rèn)) -->
    <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:[動態(tài)指令參數(shù)]>
    動態(tài)決定插入哪個插槽
  </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ù)是什么真的無所謂, 比如我子組件傳出item,
   父組件要接收item.id, 寫v-slot="awsl.id"接收也可以-->
  </template>
</current-user>
<!--或者 -->
<current-user>
  <template v-slot="num"> <!-- 只傳一個時不要加大括號. -->
  </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)簽頁數(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">
  <!--然后你可以看到, 我們在這里用slotProps來接收item,
    沒有任何問題, 也能拿到里面的id屬性(見下); -->
    <ul>
      <li
        v-for="i in data.article_content[slotProps.item.id]"
        :key="i"
       >
       <!--這樣把article_content的序號和tab的序號對應(yīng)起來, 
         實現(xiàn)第2頁顯示第2個數(shù)組, 第3頁顯示第3個數(shù)組 -->
      </li>
    </ul>
  </template>
</sy-tabs>

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