Question

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

文字 =要在链接中显示的文字。
图标 =链接旁边显示的图标的标识符。

＆LT; sidebar-link text =“Home”icon =“fa-home”＆gt;

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

感谢。

Answer 1

因此，当您的属性icon持有值home时，您可以使用一些类绑定，如下所示（感谢上帝js表达式在Vue.js中attributes内允许）：< / p>

v-bind:class="[{'fa': true}, icon ? 'fa-' + icon : '']"

甚至更短

:class="[{'fa': true}, icon ? 'fa-' + icon : '']"

这将导致

class="fa fa-home"

Answer 2

如果您想将fa-home添加到，可以将其传递给父组件，如：

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

您可以传递其他图标，例如fa-plus，fa-blutooth ....而不是

并在组件中使用它：

<div id="sidebarIcon">
   <i class='fa' :class="icon" aria-hidden="true"></i>
</div>

tbh：对我来说有点意义，为什么你需要保留fa

你仍然需要一个道具，默认值为''但

icon: {
  type: String,
  required: false,
  default: ''
}

Vue - 使用prop将类名添加到组件

2 个答案: