vue中slot插槽的参数汇总及使用方案

<button>
    <slot>这是当使用的时候没传参的时候显示的内容</slot>
</button>

<child>编辑</child>

<button>编辑</button>

<div class="title">
    <slot>标题位置</slot>
</div>
<div class="subtitle">
    <slot name="subTitle">这是副标题</slot>
</div>

<child>
    默认插槽，可以写template v-slot:default也可以不写
    <h3>我还能加个标签</h3>
    <template v-slot:subtitle>这是副标题</template>
    这个地方也是默认插槽里面的
</child>

<div class="title">
    默认插槽，可以写template v-slot:default也可以不写
    <h3>我还能加个标签</h3>
    这个地方也是默认插槽里面的
</div>
<div class="subtitle">这是副标题</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">标题位置</slot>
</div>
<div class="subtitle">
      <slot name="subTitle" :user="user">这是副标题</slot>
</div>
<script setup>
import { reactive } from "vue";
const user = reactive({
  firstName: "Zhang",
  lastName: "San",
});
</script>

<child>
    <template v-slot="slotProps">
      有命名插槽的时候v-slot就不能写到child标签里面了 {{slotProps.user.firstName}}
    </template>
    <template v-slot:subTitle="{user}">{{user.lastName}}</template>
</child>

<child>
    <template #default="{ user }">
      有命名插槽的时候v-slot就不能写到child标签里面了 {{ user.firstName }}
    </template>
    <template #subTitle="{ user: { lastName } }">{{ lastName }}</template>
  </child>

<div class="title">有命名插槽的时候v-slot就不能写到child标签里面了 Zhang</div>
<div class="subtitle">San</div>