[英]Vue.js - how to pass props to component elements with slot
我正在尝试从包含插槽的组件元素传递道具
患者预订.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
组件的单词时,它总是默认为显示 RESULT DETAIL 的空字符串。
请我需要有关如何解决此问题的帮助
尝试像这样使用作用域插槽:
用户配置文件.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.