我使用vue cli启动了一个BalmUI项目。在这个框架的一个组件中（我的意思是浮动动作按钮），文档说我们可以在这个组件的插槽中使用一个名为iconClass的 prop 。文档中的示例是这样的：
<ui-fab>
<template #default="{ iconClass }">
<svg-logo :class="iconClass"></svg-logo>
</template>
</ui-fab>但它没有说任何其他关于这个 prop 。这是一个图标名称的材料图标，或一个类，我们可以添加自定义样式的插槽或其他任何东西。我试图通过创建两个vue组件来理解这个 prop 的含义。父组件名为HelloWorld。vue有以下代码：
HelloWorld.vue:
<template>
<div class="hello">
<ui-fab>
<template #default="{ iconClass }">
<svg-logo :class="iconClass"></svg-logo>
</template>
</ui-fab>
</div>
</template>
<script>
import SvgLogo from '../components/SvgLogo.vue';
export default {
name: 'HelloWorld',
data() {
return {
iconClass: {
myClass: true
}
}
}, // end of data
components: {
SvgLogo
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.myClass {
color: red;
font-size: 50px;
}
.iconClass {
color: red;
font-size: 50px;
}
</style>第二个组件有这些代码：
SvgLogo.vue:
<template>
<div>
HD
</div>
</template>
<style scoped>
.myClass {
color: red;
font-size: 50px;
}
.iconClass {
color: red;
font-size: 50px;
}
</style>但在我的结果页面中什么也没有发生。我的意思是没有样式应用于SvgLogo组件。我不明白我的代码有什么问题？
1条答案
按热度按时间x4shl7ld1#
在我的应用程序中搜索并使用浏览器devtools后，我发现这个 prop 和其他balmui组件插槽中的其他类似 prop 在内部工作。我的意思是他们不需要我们提供任何class或vue数据。例如，如果我们从该代码中省略iconClass：
然后在浏览器devtools中，我们可以看到类似于fab btn的图像：
如果我们注意到该部分中的“HD”单词（来自svg-logo组件），则没有向其添加类。另一方面，使用iconClassprop：
我们可以在浏览器devtools中看到类似这样的图像：
在本例中，
mdc-fab__icon类被添加到包含HD单词的div中。所以balmui自己给那个div添加了一些样式，像这样：因为文档中没有提到这个属性，我以为它是一个类名或者一个数据，我们必须在代码中添加它来定制fab组件，但是我错了。