【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応用編:コンポーネントに自由にデータを渡そう
この記事が気に入ったらサポートをしてみませんか?