前置き
Vue.jsとNuxt.jsで便利なpropsを使ってみましょう！
今回は応用編です！
ご意見やご感想、いつでもお待ちしております！
props応用編では
・オプション: validator(ちょっと複雑なため)
・cssの付け替え
をやる予定でしたが、
・cssの付け替え
・props, $emit, eventBusの違い
に変更致しました！
validatorは下記のため、あまり使う機会がなく今回は省きます。
・スペルミスのチェックは、エディターのプラグインで事足りる
・細かい条件指定は、VeeValidateなどライブラリ使う方が良さそう
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基礎編です！