我使用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组件,但是我错了。