Question

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

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组件中，它始终默认为显示结果详细信息的空字符串。 / p>

关于如何解决此问题，我需要帮助

Answer 1

尝试像这样使用scoped slots：

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>

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

1 个答案: