vue.js 在自定义离子组件中使用多个命名插槽

lkaoscv7  于 2022-11-17  发布在  Vue.js
关注(0)|答案(1)|浏览(120)

我尝试将多个插槽添加到自定义组件中,在本例中是导航栏...当我只使用一个插槽并且没有名称时,它可以正常工作。当我包含插槽名称时,它就停止工作。
正在呼叫导航栏...

<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>

我正在使用离子v6与Vue.js 3.
我不能让它工作...有什么想法吗?

e4yzc0pl

e4yzc0pl1#

您是否尝试:

<template #first>HELLO</template>

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

相关问题