Vue.js -如何将道具传递给带有槽的组件元素

Question

我试图从包含插槽的组件元素中传递道具。

PatientBooking.vue

<user-profile :titlename="BOOKINGDETAIL">
  <div class="block">
    <div>Ereferral: 84884jjd</div>
    <div>Gender: Male</div>
    <div>Height: 84</div>
  </div>
</user-profile>

UserProfile.vue

<div class="block">
  <div class="block">
    <template v-if="titlename == 'BOOKINGDETAIL'">BOOKING DETAIL</template>
    <template v-else-if="titlename == 'BOOKING'">BOOKING</template>
    <template v-else>RESULT DETAIL</template>
  </div>
  <div class="block">
    <slot></slot>
  </div>
</div>

export default {
  name: "UserProfile",
  props: {
    titlename: {
      type: String,
      default: ""
    }
  }
}  

现在，每当我将user-profile组件与titlename道具绑定到没有进入UserProfile组件中的任何单词时，它总是默认为空字符串，该字符串显示结果细节。

请帮我解决这个问题

Answer 1

尝试像这样使用作用域槽：

UserProfile.vue

<div class="block">
  <div class="block">
    <template v-if="titlename == 'BOOKINGDETAIL'">BOOKING DETAIL</template>
    <template v-else-if="titlename == 'BOOKING'">BOOKING</template>
    <template v-else>RESULT DETAIL</template>
  </div>
  <div class="block">
    <slot :title="titlename"></slot>
  </div>
</div>

PatientBooking.vue

<user-profile :titlename="BOOKINGDETAIL">
 <template v-slot:default="slotProps">
  <div class="block">
   // use slotProps.title to get access to titlename passed via slots
    <div>Ereferral: 84884jjd</div>
    <div>Gender: Male</div>
    <div>Height: 84</div>
  </div>
</template>
</user-profile>