在自定义 Ionic 组件中使用多个命名插槽答案

【问题标题】：Using multiple named slots in custom Ionic Component在自定义 Ionic 组件中使用多个命名插槽
【发布时间】：2022-11-14 02:48:10
【问题描述】：

我正在尝试向自定义组件添加多个插槽，在本例中为 Navbar ... 当我只使用一个并且没有名字时，它工作得很好。当我包含插槽名称时，它会停止工作。

调用导航栏...

  <CustomNavbar title="USERS.NAME">
    <div slot="first">HELLO</div>
    <div slot="second">GOODBYE</div>
  </CustomNavbar>

这是导航栏模板，简化...

  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <slot name="first"></slot>
    </ion-buttons>
    <ion-title>{{title}}</ion-title>
    <ion-buttons slot="primary">
      <slot name="second"></slot>
    </ion-buttons>
  </ion-toolbar>

我将 Ionic v6 与 Vue.js 3 一起使用。

我不能让它工作......有什么想法吗？？？

【问题讨论】：

标签： vue.js ionic-framework vuejs3 ionic6

【解决方案1】：

您是否尝试过：

<template #first>HELLO</template>

或者

<template v-slot:first>HELLO</template>

【讨论】：