Vue动态类绑定与计算道具

Question

我正试图通过计算的插槽切换案例将类从父组件绑定到子组件。父级：

<template>
<mcTooltip :elementType="'text'"><p>Test</p></mcTooltip>
</template>
<script>
import mcTooltip from '@/components/mcTooltip/index.vue';
export default {
components: {
mcTooltip
}
};
</script>

儿童：

<template>
<div>
<slot :class="[elementClass]" />
</div>
</template>
<script>
export default {
props: {
elementType: {
type: String,
required: true,
// must have one of these elements
validator: (value) => {
return ['text', 'icon', 'button'].includes(value);
}
}
},
data() {
return {};
},
computed: {
elementClass: () => {
// return this.elementType ? 'tooltip--text' : 'tooltip--text';
// calls prop value for verification
switch (this.elementType) {
case 'text':
return 'tooltip--text';
case 'icon':
return 'tooltip--icon';
case 'button':
return 'tooltip--button';
default:
return 'tooltip--text';
}
}
},
};
</script>
<style lang="scss" scoped>
.tooltip--text {
text-decoration: underline dotted;
cursor: pointer;
&:hover {
background: $gray_220;
}
}
</style>

无论我做什么，我似乎都做不到。这是我最近的一次尝试。vue开发工具对我的计算道具说：；(评估期间的错误("；。

Answer 1

我找到了一个解决方案，我的方法如下：

<div
v-show="showTooltip"
ref="mcTooltipChild"
:class="['tooltip__' + elementType]"
></div>
elementType: {
type: String,
default: 'small',
},