💐

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

2022/11/09に公開約800字

やりたいこと

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

コード

親コンポーネント

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

$routeは以下参照
https://frankies1.gitbooks.io/vue-r-pdf/content/ja/api/route-object.html

子コンポーネント

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

ログインするとコメントできます