@y-temp4
Posted at

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

CSSVue.js

以下のように 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

Edit request
1