Vueと共通

【Nuxt.js】Components番外編: 親子間のやりとり、動かす方法はいくつもある!

前置き

コンポーネント間のやりとりについて、
やりたいことがある時に
パターンがいくつかあるよという例です🍒
それぞれどんな時に使うかも
目次ごとに記載しています🌟

propsでfuncすることは
あまりないのですが…!
初めから誰もが見やすい
完璧なコードを目指すのではなく、
動かすだけならこんな方法もある!
と知ることは大事だと思います🎈🧸

emit基礎編
props基礎編
Vuex基礎編


やりたいこと

親ではname
子ではmyName

buttonで名前を変えるだけです笑
とにかくシンプルにわかりやすく!
がモットーです😄

directory

components/
--| Name.vue

pages/
--| index.vue

store/
--| index.js

パターン1: $emit, $event

どんな時に使う?

今回のように構造がシンプルな時⭕️
というか基本はコレです!✨
親で渡しているpropsの値を変えます。
これができればモーダルウィンドウも簡単!
【Nuxt.js】$emit実践編:モーダルウィンドウ を操作しよう

コード

) components

) pages

@nameSwitch="name = $event"
親にあるdataのname: 'Bob'を
イベントで操作します🌟
@nameSwitch="name"にすると
通常methodsのname()になるけど
dataのnameをイベントで渡すことにより
子のmethods, resetNameを使用します!

カスタムイベント

名前を戻してみる

親にmethods追加して
名前を戻してみましょう。
ちゃんと戻ります🌟

) pages

注意

子で値を変えた場合は
動作はしますがエラーになります!


パターン2: propsをfunc

どんな時に使う?

あんまり使いません。
前置きに書いたように
動かす手段の1つとしてご紹介。

コードは単純で分かりやすいです😀
ただこれをやるなら
$emitやvueの方が良いですね⭕️
子と親でのやりとりを
理解するのには最もシンプルで
良いかもしれません💡

子コンポーネントから親のメソッドを実行する方法

コード

) components

) pages

パターン3: vuex

どんな時に使う?

ネストが深すぎてpropsがどうなってるか
分かりにくい!!って時に使います。
あとはサーバーとの通信が基本なので
今回のシンプルかつ通信不要な際は使いません。

ただ導入が容易ではなく
気軽にオススメはしません🙅‍♂️💥
とはいえ理解すれば意外と簡単で、
本当に必要な時にはとても便利です⭕️

【Nuxt.js】Vuex基礎編:コードをスッキリさせよう

一見、コードもファイルも増えて
ごちゃついてそうな印象ですが☁️
何がどこにあって、が超絶見やすいですね✨👀

コード

) components

) pages

) file

-Vueと共通
-,

© 2024 aLiz Nuxt