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

🎈 この記事はWPへ移行しました
【Nuxt.js】props応用編：コンポーネントに自由にデータを渡そう

# 前置き

Vue.jsとNuxt.jsで便利なpropsを使ってみましょう！
今回は応用編です！
ご意見やご感想、いつでもお待ちしております！

props応用編では
・オプション: validator(ちょっと複雑なため)
・cssの付け替え
をやる予定でしたが、

・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>

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

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

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

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

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

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

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

【コード】

Component.vue // 子コンポーネント
<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>

index.vue // 親ページ
<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>

これで背景の変化が確認できたと思います😄
ここまでできれば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回で済むとか！

ということで次回はemitの基礎編をやります。
公開予定日は12/6(金)です。
お楽しみに🌟

🎈 この記事はWPへ移行しました
【Nuxt.js】props応用編：コンポーネントに自由にデータを渡そう