我想在Vue中使用以下道具制作自定义组件：
@H_301_2@> text =要在链接中显示的文本.
> icon =链接旁边显示的图标的标识符.
@H_404_24@解决方法
> icon =链接旁边显示的图标的标识符.
@H_301_2@< sidebar-link text=”Home” icon=”fa-home”>@H_301_2@我有我的组件的以下.Vue模板.
<template>
<div id="sidebarItem">
<a href="/index.PHP">
<div id="sidebarIcon"><i :class="{fa : true}" aria-hidden="true"></i></div>
<div id="sidebarText">{{ text }}</div>
</a>
</div>
</template>
<script>
export default {
props: ['text','icon'],data () {return {}}
}
</script>
@H_301_2@基本上我在我的模板中有默认的Font-Awesome代码：
<i class="fa fa-home" aria-hidden="true"></i>@H_301_2@我希望通过使用它的prop来为我的组件添加一个类.
<sidebar-link text="Home" icon="fa-home"></sidebar-link>@H_301_2@谢谢.
因此,当您的属性图标保持值为home时,您可以使用一些类绑定,如下所示(感谢上帝js表达式在Vue.js中允许在
attributes内)：
v-bind:class="[{'fa': true},icon ? 'fa-' + icon : '']"
@H_301_2@甚至更短
:class="[{'fa': true},icon ? 'fa-' + icon : '']"
@H_301_2@这将导致
class="fa fa-home"
