【vue】 親コンポーネントのstyleタグから、子コンポーネントのidやclassの情報を変更できるようにするための方法メモ

はじめに

vueで、親コンポーネントのstyleタグから、子コンポーネントのidやclassの情報を変更できるようにするための方法。
自分用メモ。

内容

下記の方法

::v-deepを子コンポーネント内部の変更させたいidやclassの前に記述する

を行うことで子コンポーネント内部の要素も変更されるようになる。

具体的な記述は以下。

親コンポーネント

<template>
    <div class="parent">
        <p class="text">親コンポーネントpタグ</p>
        <Child />
    </div>
</template>

<script>
import Childfrom '../components/Child.vue'
export default {
    name: 'Parent',
    components: {
       Child
    }
}
</script>

<style lang="scss" scoped>
::v-deep .text {
  color: red;
}
</style>

子コンポーネント

<template>
 <div class="children">
  <p class="text">子コンポーネントpタグ</p>
 </div>
</template>

<script>
 export default {
  name: 'Child'
 }
</script>

以下の記事を参考させていただきました。ありがとうございます。