Posted at

VueのFunctional Componentsに親で付与したCSSを読み込む方法

以下のように Vue の Functional なコンポーネントを親から呼び出します。


AppButton.vue

<template functional>

<button class="app-button">
<slot />
</button>
</template>

<style lang="scss" scoped>
.app-button {
background: red;
}
</style>



親コンポーネント

<template>

<AppButton class="button-test">ボタン</AppButton>
</template>

<script>
import AppButton from '~/components/AppButton'

export default {
components: {
AppButton
},
}
</script>

<style lang="scss" scoped>
.button-test {
margin: 10px;
}
</style>


このとき、親で定義した.button-test読み込まれません

詳しくは vue.js: functional componentとscoped css - ぬまのそこ あたりの記事が参考になるのですが、執筆時点ではこの記事の対処法は動作しませんでした。

そこでもう少し調べると、以下のように書けば良いことが分かりました。


AppButton.vue

<template functional>

<button class="app-button" :class="data.staticClass">
<slot />
</button>
</template>

<style lang="scss" scoped>
.app-button {
background: red;
}
</style>


これで親で定義した class が読み込まれたかと思います。以下の issue に感謝。

"class" and "style" attributes have no effect on functional SFC components · Issue #7985 · vuejs/vue