Vue - 소품을 사용하여 컴포넌트에 클래스 이름 추가

Vue - 소품을 사용하여 컴포넌트에 클래스 이름 추가

아래 소품으로 Vue에서 커스텀 컴포넌트를 만들고 싶습니다.

• text = 링크에 표시할 텍스트.
• 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>

컴포넌트의 소품을 사용하여 클래스를 추가하고 싶습니다.

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

고마워요.

그래서 당신의 부동산이icon가치를 가지고 있다home다음과 같은 클래스 바인딩을 사용할 수 있습니다(Vue.js의 속성 내에서 js 표현이 허용됩니다).

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

또는 더 짧다

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

이로 인해

class="fa fa-home"

추가하고 싶은 경우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: ''
}

언급URL : https://stackoverflow.com/questions/47775647/vue-adding-a-class-name-to-a-component-using-a-prop