Vueと共通

【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

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

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

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

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

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

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

コード

) components

) pages

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

-Vueと共通
-,

© 2020 aLiz Nuxt