【Vue.js】propsを使ってダークモードに切り替えられるヘッダーを作ってみる

どうも。みずかず(@mizukazu_1)です。

今回は以前紹介したpropsという機能を使ってダークモードに切り替えられるヘッダーを作ってみようと思います。

ちなみにpropsの記事は以下になります。
まだ読んでない方がいたら先に読んでおくことをオススメします。

2021年2月10日【Vue.js】カスタムコンポーネントにpropsを設定してデータを渡す

VueCLIを使ってVueのプロジェクトを作成した前提でお話していきます。

ヘッダー用のコンポーネントを作成

まずはヘッダー用のコンポーネントを作成します。

src/componentsの中にMHeader.vueというファイルを作ります。
MはみずかずのMから取っています。

ヘッダーを作成していく

MHeader.vueの中身はこんな感じです。

ここでは一旦コードの全容を記載して後に順を追って説明していきます。

<template>
  <header :class="{ dark: this.dark }">
    <h1>{{ title }}</h1>
  </header>
</template>

<script>
export default {
  name: 'm-header',
  props: {
    title: String,
    dark: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped lang="scss">
header {
  background: #add6ff;
  color: #333;
  padding: 8px 8px;
  h1 {
    margin: 0;
  }
}
header.dark {
  background: #000;
  color: #fff;
}
</style>

templateについて

templateではheaderとh1を指定しています。

propsを使ってh1に設定するテキストをコンポーネントの呼び出し側で設定するようにしています。

headerタグのclassに注目です。

v-bindを使用して動的にclassの付与を行っています。

this.darkの値がtrueならheaderにはdarkというクラスが付きます。
falseならdarkクラスは付きません。

<header :class="{ dark: this.dark }">

this.darkはpropsのdarkを指しています。
defaultにfalseが設定されているので何もしなければdarkクラスは付かないというわけです。

scriptについて

ここでは単純にpropsの指定を行っているだけです。

titleとdarkの2つのpropsを定義しています。

<script>
export default {
  name: 'm-header',
  props: {
    title: String,
    dark: {
      type: Boolean,
      default: false
    }
  }
}
</script>

styleについて

ここではデフォルトのheaderのスタイルとダークモードの為のCSSを記述しています。

<style scoped lang="scss">
header {
  background: #add6ff;
  color: #333;
  padding: 8px 8px;
  h1 {
    margin: 0;
  }
}
header.dark {
  background: #000;
  color: #fff;
}
</style>

このコンポーネントの呼び出し側

呼び出し側では以下のように書きます。

<m-header title="Vue テストサイト" :dark="true"></m-header>

コンポーネントの名前であるm-headerタグを使用して呼び出します。

h1に表示させたいテキストをtitleというプロパティを使用して設定します。

darkにはダークモードにしたい場合にはtrueを、通常のヘッダーとして使用したい場合にはfalseもしくはdarkというプロパティ自体を書かなくてOKです。

darkプロパティではv-bindを使用していますが、Booleanの値を渡す際にはv-bindを使用しなければいけません。

そうしないとtrue、falseの値がテキストとして送られてしまうので型が違いますよというエラーが出ます。
ここは要注意ですね。

まとめ

コンポーネントにBoolean型のpropsを設定
1のpropsでクラスを付与するかしないかの判断
呼び出し側でtrue、falseを使ってヘッダーを制御する

大まかにこんな流れになるかと思います。

少し分かりにくい部分もあるかと思いますが、実際に作成してみると流れが分かってくると思います。

もしVueについてもう少し知りたいという方がいたら下記の記事も参考になると思います。

2019年2月25日 Vue.jsを使ってみたので分かりやすくまとめた

みずかず

最後まで読んでいただきありがとうございます。
Vueは楽しいですね！