💐

【Vue】子コンポーネントに渡したパスに応じてクラスを付与する

2022/11/09に公開

Vue.js

tech

やりたいこと

親コンポーネントでパスを取得する
子コンポーネントにパスを渡す
子コンポーネントで受け取ったパスに応じてスタイルを変化させる

コード

親コンポーネント

parant.vue

<template>
<child-component :path-name="$route.name" />
</template>

$routeは以下参照

子コンポーネント

child.vue

<template>
  <!-- pathNameが一致する場合にcurrent-pageのクラスが付与される -->
  <div :class="{ 'current-page': pathName === 'camellia' }">
    <span>つばき</span>
  </div>
  <div :class="{ 'current-page': pathName === 'magnolia' }">
    <span>こぶし</span>
  </div>
</template>

<script>
import { defineComponent } from '@nuxtjs/composition-api'

export default defineComponent({
  props: {
    pathName: {
      type: String,
      default: ''
    }
  }
})
</script>

<style lang="scss" scoped>
.current-page {
        color: #ffffff;
}
</style>

やりたいこと

コード

親コンポーネント

子コンポーネント

Discussion