親からコンポーネントのスタイリングを変更するにはどうすればよいですか？

Question

VueコンポーネントのいくつかのCSSプロパティを親から変更する必要があります。コンポーネント内で定義されたCSSを上書きします。

私は、最初のコンポーネント<my-component>のために、私は直接他の要素と同様に、親からのスタイルを設定できることが期待される：

my-component { 
    font-weight: bolder; 
} 

これは動作しません。

私が試した2番目の解決策は、スタイリングで使用される関連情報とともにコンポーネントに小道具を渡すことです。これはうまくいきますが、私はまだ継承メカニズムに近い解決策が望まれています（親の設定が子供のものに重点を置いています。つまり、<b>要素のスタイリングと同じです）。

このようなメカニズムはありますか？インスピレーションを得るため

Answer 1

、カスタムコンポーネントタグは、そのテンプレートの定義に置き換えられます。そのため、CSSでカスタムコンポーネントのタグを選択しようとしても、そのタグはDOM内にないため動作しません。

（カスタムコンポーネントタグの代わりにDOMに挿入されるため）class属性を子コンポーネントのルート要素に追加するだけです。正気のために、私はクラス名をコンポーネントと同じ名前にするだけです。次に、CSS内の任意の場所で.my-componentを使用してコンポーネントを選択できます。 （クラス `=「私の成分」`のように）、あなたからのスタイルを追加することができ、子コンポーネントのルート要素にクラスを追加

Vue.component('my-component', { 
 
    template: `<div class="my-component">Foo</div>`, 
 
}) 
 

 
new Vue({ el: '#app' })

.my-component { color: goldenrod; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script> 
 
<div id="app"> 
 
    <my-component/> 
 
</div>

Answer 2

：Vueのは、コンポーネントのテンプレートをレンダリングするとき

var comp = { 
 
    template: '<p><slot></slot></p>' 
 
} 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    inParent: true 
 
    }, 
 
    components: { 
 
    comp 
 
    }, 
 
    methods: { 
 
    change() { 
 
     this.inParent = !this.inParent 
 
    } 
 
    } 
 
})

.blue { 
 
    background-color: blue 
 
}

<div id="app"> 
 
    This button is in parent: 
 
    <button @click="change">change child style</button> 
 
    <comp :class="{blue: inParent}">This is child component</comp> 
 
</div> 
 

 
<script src="https://unpkg.com/vue"></script>