vue.js - 1つのコンポーネントから別のコンポーネントへスタイルをバインドする

Question

この質問はvue.jsに関するもので、webpack構成を使用する定型文で動作します。

私は、コンポーネントfatherからコンポーネントson（名前付けを簡単にするために）にsass変数を動的に渡す必要があります。

コンポーネントfather私はスタイルタグから$color変数にアクセスできます。 は、と私は、このHTMLテンプレートを使用してsonコンポーネントに呼んでいる：

// father component 
    <template> 
     <son></son> 
    </template> 
    <style lang='sass' scoped> 
     @import 'assets/sass/color'; 
    </style> 

輸入SASS変数は、$color必要がさんは息子が単純なdiv要素であるとしましょうfatherから来て、son

の背景を変更します。

// son component 
    <template> 
     <div></div> 
    </template> 

    <style lang=sass scoped> 
     div { 
      width: 200px; 
      height: 200px; 
     } 
    </style> 

どうすればよいですか？

Answer 1

あなたはSASSをインポートなど、

<p v-bind:style="[baseStyles, overrideStyles]"> 
baseStyles and overrideStyles 
</p> 

EDIT

か、また、グローバル使用することができ、あなたのスコープのスタイリングのほかに、あなたが

<template> 
    <div v-bind:class="$style.my_component">Hello</div> 
</template> 
<style module> 
    .my_component { 
     color: purple; // still the best color ever 
    } 
</style> 

Answer 2

ような何かを行うことができますがバインディングを使用することができます子コンポーネントに公開される同じコンポーネント内のもの。 scopedキーを使用せずに、コンポーネントに新しいスタイルタグを追加するだけです。

コンポーネントはどういうわけか見えます。配列内のこれらの値は、SASS値として宣言されている場合

<style> 
/* global styles */ 
</style> 

<style scoped> 
/* local styles */ 
</style> 

Source