<button>
    <slot>這是當(dāng)使用的時候沒傳參的時候顯示的內(nèi)容</slot>
</button>

<child>編輯</child>

<button>編輯</button>

<div class="title">
    <slot>標(biāo)題位置</slot>
</div>
<div class="subtitle">
    <slot name="subTitle">這是副標(biāo)題</slot>
</div>

<child>
    默認(rèn)插槽，可以寫template v-slot:default也可以不寫
    <h3>我還能加個標(biāo)簽</h3>
    <template v-slot:subtitle>這是副標(biāo)題</template>
    這個地方也是默認(rèn)插槽里面的
</child>

<div class="title">
    默認(rèn)插槽，可以寫template v-slot:default也可以不寫
    <h3>我還能加個標(biāo)簽</h3>
    這個地方也是默認(rèn)插槽里面的
</div>
<div class="subtitle">這是副標(biāo)題</div>

<div class="title">
    <slot v-bind:user="user">{{ user.firstName }}</slot>
    <!-- 簡寫：
    <slot :user="user">{{ user.firstName }}</slot> -->
</div>
<script setup>
import { reactive } from "vue";
const user = reactive({
  firstName: "Zhang",
  lastName: "San",
});
</script>

<child v-slot="slotProps">
    我的名字是{{ slotProps.user.lastName }}
</child>

<div class="title">我的名字是San</div>

<div class="title">
      <slot :user="user">標(biāo)題位置</slot>
</div>
<div class="subtitle">
      <slot name="subTitle" :user="user">這是副標(biāo)題</slot>
</div>
<script setup>
import { reactive } from "vue";
const user = reactive({
  firstName: "Zhang",
  lastName: "San",
});
</script>

<child>
    <template v-slot="slotProps">
      有命名插槽的時候v-slot就不能寫到child標(biāo)簽里面了 {{slotProps.user.firstName}}
    </template>
    <template v-slot:subTitle="{user}">{{user.lastName}}</template>
</child>

<child>
    <template #default="{ user }">
      有命名插槽的時候v-slot就不能寫到child標(biāo)簽里面了 {{ user.firstName }}
    </template>
    <template #subTitle="{ user: { lastName } }">{{ lastName }}</template>
  </child>

<div class="title">有命名插槽的時候v-slot就不能寫到child標(biāo)簽里面了 Zhang</div>
<div class="subtitle">San</div>