小编Sam*_*lot的帖子

我想在Vue中使用以下道具制作自定义组件:

• text =要在链接中显示的文本.
• icon =链接旁边显示的图标的标识符.

<sidebar-link text ="Home"icon ="fa-home">

我有我的组件的以下.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>

基本上我在我的模板中有默认的Font-Awesome代码:

<i class="fa fa-home" aria-hidden="true"></i>

我希望通过使用它的prop来为我的组件添加一个类.

<sidebar-link text="Home" icon="fa-home"></sidebar-link>

谢谢.