【Nuxt.js】props応用編：コンポーネントに自由にデータを渡そう

前置き

便利なpropsを使ってみましょう！
今回は応用編です🌟

props応用編では
cssの付け替え
props, $emit, eventBusの違い
をやっていきます！

validatorは下記のため、あまり使う機会がなく今回は省きます。
・スペルミスのチェックは、エディターのプラグインで事足りる
・細かい条件指定は、VeeValidateなどライブラリ使う方が良さそう

props基礎編はこちら

propsを使おう！応用編

今回はpropsのStringを使って、cssを自由に付け替えましょう！
buttonの背景を親によって変えてみます。

構成

まずはクラスバインディングの基礎から
https://jp.vuejs.org/v2/guide/class-and-style.html

<button v-bind:class="{ class名: 真偽値}"></button>

1	<button v-bind:class="{ class名: 真偽値}"></button>

classの有無を真偽値によって決めます。
今回はitem-lightクラスで背景を水色にします。

<button :class="{ 'item-light': itemStatus === 'light' }"></button>

1	<button :class="{ 'item-light': itemStatus === 'light' }"></button>

item-lightクラスの有無を
itemStatusが文字列lightと完全一致するか否かで判断しています。

文字列lightであることが分かるよう、
シングルクォーテーションで囲みます。
こうしないと、methodsとかプロパティでlightを探してしまいます。
「は？せっかく探したのにないやんけ！！！😡」
とエラーで怒られてしまいます。ぷんぷん。

また、クラス名は2単語以上の場合
シングルクォーテーションで囲みます。

基礎でpropsは空箱なような物と書きました。
今回も考え方は同じです。
itemStatusという空箱にlightという文字列が入ったら、
item-lightクラスをつけるイメージです！

こんがらがったら基礎に戻りましょう！😀

コード

) components

<template>
 <div class="component">
   <button
   　:class="{ 'item-light': itemStatus === 'light' }"
   >
     <p>Hello Nuxt.js!</p>
   </button>
 </div>
</template>

<script>
export default {
 props: {
   itemStatus: {
     type: String,
   }
 },
}
</script>

<style lang="scss">
 .component {
   button {
     padding: 10px;
     border: 1px solid #94E4EE;
     border-radius: 8px;
     &.item-light {
       background-color: #94E4EE;
     }
     p {
       font-size: 36px;
     }
   }
 }
</style>

<button

　:class="{ 'item-light': itemStatus === 'light' }"

<p>Hello Nuxt.js!</p>

</button>

</div>

</template>

export default {

props: {

itemStatus: {

type: String,

}

</script>

.component {

button {

padding: 10px;

border: 1px solid #94E4EE;

border-radius: 8px;

&.item-light {

background-color: #94E4EE;

}

p {

font-size: 36px;

}

</style>

) pages

<template>
 <div class="container">
   <Component />
   <Component
     item-status="light" // itemStatusが文字列lightと一致する
   />
 </div>
</template>

<script>
import Component from '~/components/Component.vue'

export default {
 components: {
   Component
 }
}
</script>

<style lang="scss">
  .container {
   padding: 20px;
   display: flex;
   .component {
     margin-right: 20px;
   }
 }
</style>

<Component

item-status="light" // itemStatusが文字列lightと一致する

</div>

</template>

import Component from '~/components/Component.vue'

export default {

components: {

Component

}

</script>

.container {

padding: 20px;

display: flex;

.component {

margin-right: 20px;

}

</style>

これで背景の変化が確認できたと思います😄
ここまでできればpropsはもう使えますね✨👏

ちなみにキャメルケースで
:itemStatus="light"と書いても反映はされますが、
「書き方が汚い！！！😡」と言われてしまいます。。。
ケバブケースで書きましょう！

それから、Stringを直接渡す時はコロンはいりません。
:item-status="light"
にしてしまうと、
「lightって変数どこ？ないじゃん😢もう知らない😢」
とそっぽを向かれます笑

props, $emit, eventBusの違い

コンポーネントの親子間でのやりとりに使われるこの3つ。
propsのまとめと、それぞれの違いを簡単に説明します！
簡単に、なので雰囲気が分かればOKです。
具体的な使い方などはそれぞれの記事で解説します。

ちなみにpropsとslotの違いについては
props基礎編をご覧ください！

props
親 → 子
子は空箱、親が自由にデータを入れることができるイメージです。
基礎と今回の応用をやれば◎
emit
子→ 親
通常は子から親にデータを伝えることができません。
それをemitを使ったカスタムイベントで親になんとか気づいてもらいます！
eventBus
子 → 子
ですが使用例をほとんど見たことがありません。
基本的にVuexというライブラリを使えば解決します！

Vuex

データ保存ができるもの
ログイン情報がページ遷移しても保持されるとか、
APIのデータ引っ張ってきて保存とか、
まれにmethodsに何度も同じ処理かかなくても1回で済むとか！