时间戳

首页 > 解决方案 > Vue.js - 如何将道具传递给带有插槽的组件元素

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

问题描述

我正在尝试从包含插槽的组件元素传递道具

患者预订.vue

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

用户配置文件.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组件的单词的 props 绑定时，它总是默认为显示 RESULT DETAIL 的空字符串。

请我需要有关如何解决此问题的帮助

标签： javascriptvue.jsvuejs2vue-component

解决方案

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

用户配置文件.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>

患者预订.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>

推荐阅读