Vue - プロパティ値でCSSクラス名をバインドする

Question

私はそれを使用している親コンポーネントに基づいて子コンポーネントにクラスを設定したいと思います。例えば、私はより多くのコンポーネントで使用したいドロップダウンメニューを持っていますが、私はそれを使っているコンポーネントに基づいて別のクラスを提供したいと思います。 このような何か、親コンポーネントのトップバー：ドロップダウン・メニューコンポーネントで

<dropdown-menu :menu="link" :parent:'top-bar'></dropdown-menu> 

そして：、それは私がこれを行うことができますどのように、

<div class="dropdown" :class="{ parent: parent }"> 

<script> 
    export default { 
    name: 'dropdown-menu', 
    props: ['parent'], 

しかし、働いていませんか？

Answer 1

あなたはタイプ:parent:'top-bar' - >:parent='top-bar'でした。あなたのクラスバインディングは常にクラスとして '親'文字列を渡します。詳細はhereをご覧ください。

は、私はまた、小さな作業例を作った：これが唯一の問題ですが、私は `信じるならば

Vue.component('parent1', { 
 
    template: '<div><dropdown-menu :menu="link" :parent="top_bar"></dropdown-menu></div>', 
 
    data() { 
 
     return { 
 
      link: 'a link', 
 
      top_bar: 'parent1' 
 
     } 
 
    } 
 
}); 
 

 
Vue.component('parent2', { 
 
    template: '<div><dropdown-menu :menu="link" :parent="top_bar"></dropdown-menu></div>', 
 
    data() { 
 
     return { 
 
      link: 'another link', 
 
      top_bar: 'parent2' 
 
     } 
 
    } 
 
}); 
 

 
Vue.component('dropdown-menu', { 
 
    template: '<div class="dropdown" v-bind:class="parent">{{ menu }}</div>', 
 
    props: ['parent', 'menu'] 
 
}); 
 

 
var vm = new Vue({ 
 
    el: '#app' 
 
});

.parent1 { 
 
    color: red; 
 
} 
 

 
.parent2 { 
 
    color: blue; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script> 
 

 
<div id="app"> 
 
    <parent1></parent1> 
 
    <parent2></parent2> 
 
</div>