Javascript Vue.js-如何通过插槽将道具传递给组件元素

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

PatientBooking.vue

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

<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: ""
    }
  }
}  

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

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

埃费拉尔：84884jjd
性别：男
身高：84

UserProfile.vue

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

<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: ""
    }
  }
}  

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

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

预订详情
预订
结果细节
导出默认值{
名称：“用户配置文件”，
道具：{
标题名：{
类型：字符串，
默认值：“
}
}
}  

现在，每当我将

用户配置文件

组件与

标题名

道具绑定在

用户配置文件

组件中，它总是默认为显示结果详细信息的空字符串

请告诉我如何解决此问题需要帮助

请尝试这样使用：

UserProfile.vue

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

<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: ""
    }
  }
}  

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

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

预订详情
预订
结果细节

PatientBooking.vue

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

<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: ""
    }
  }
}  

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

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

//使用slotProps.title访问通过插槽传递的titlename
埃费拉尔：84884jjd
性别：男
身高：84