前置き
コンポーネント間のやりとりについて、
やりたいことがある時に
パターンがいくつかあるよという例です🍒
それぞれどんな時に使うかも
目次ごとに記載しています🌟
propsでfuncすることは
あまりないのですが…！
初めから誰もが見やすい
完璧なコードを目指すのではなく、
動かすだけならこんな方法もある！
と知ることは大事だと思います🎈🧸
やりたいこと
親ではname
子ではmyName
buttonで名前を変えるだけです笑
とにかくシンプルにわかりやすく！
がモットーです😄
directory
components/
--| Name.vue
pages/
--| index.vue
store/
--| index.js
パターン1: $emit, $event
どんな時に使う？
今回のように構造がシンプルな時⭕️
というか基本はコレです！✨
親で渡しているpropsの値を変えます。
これができればモーダルウィンドウも簡単！
【Nuxt.js】$emit実践編：モーダルウィンドウ を操作しよう
コード
) components
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<template> <div class="button"> <p>myName: {{ myName }}</p> <button @click="changeName"> reset </button> </div> </template> <script> export default { props: { myName: { type: String, required: false }, }, methods: { changeName() { this.myName = "Max" this.$emit('nameSwitch', this.myName) // または1行にまとめて this.$emit('nameSwitch', 'Max') } }, } </script> |
) pages
@nameSwitch="name = $event"
親にあるdataのname: 'Bob'を
イベントで操作します🌟
@nameSwitch="name"にすると
通常methodsのname()になるけど
dataのnameをイベントで渡すことにより
子のmethods, resetNameを使用します！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<template> <div class="page"> <p>name: {{ name }}</p> <Name :myName="name" @nameSwitch="name = $event" /> </div> </template> <script> import Name from '~/components/Name.vue' export default { components: { Name }, data () { return { name: "Bob" } }, } </script> |
名前を戻してみる
親にmethods追加して
名前を戻してみましょう。
ちゃんと戻ります🌟
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<template> <div class="page"> <p>name: {{ name }}</p> <Name :myName="name" @nameSwitch="name = $event" /> <button @click="resetName"> reset </button> </div> </template> <script> import Name from '~/components/Name.vue' export default { components: { Name }, data () { return { name: "Bob" } }, methods: { resetName () { this.name = "Bob" }, }, } </script> |
注意
子で値を変えた場合は
動作はしますがエラーになります！
パターン2: propsをfunc
どんな時に使う？
あんまり使いません。
前置きに書いたように
動かす手段の1つとしてご紹介。
コードは単純で分かりやすいです😀
ただこれをやるなら
$emitやvueの方が良いですね⭕️
子と親でのやりとりを
理解するのには最もシンプルで
良いかもしれません💡
コード
) components
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<template> <div class="button"> <p>myName: {{ myName }}</p> <button @click="resetFn"> resetFn </button> </div> </template> <script> export default { props: { myName: { type: String, required: false }, resetFn: { type: Function }, }, } </script> |
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<template> <div class="page"> <p>name: {{ name }}</p> <Name :myName="name" :resetFn = "resetName" /> </div> </template> <script> import Name from '~/components/Name.vue' export default { components: { Name }, data () { return { name: "Bob" } }, methods: { resetName () { this.name = "Max" }, }, } </script> |
パターン3: vuex
どんな時に使う？
ネストが深すぎてpropsがどうなってるか
分かりにくい！！って時に使います。
あとはサーバーとの通信が基本なので
今回のシンプルかつ通信不要な際は使いません。
ただ導入が容易ではなく
気軽にオススメはしません🙅♂️💥
とはいえ理解すれば意外と簡単で、
本当に必要な時にはとても便利です⭕️
一見、コードもファイルも増えて
ごちゃついてそうな印象ですが☁️
何がどこにあって、が超絶見やすいですね✨👀
コード
) components
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<template> <div class="button"> <p>myName: {{ myName }}</p> </div> </template> <script> export default { props: { myName: { type: String, required: false }, }, } </script> |
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<template> <div class="page"> <p>name: {{ name }}</p> <Name :myName="name" @nameWasReset="name = $event" /> <button @click="$store.commit('changeName')"> change </button> </div> </template> <script> import Name from '~/components/Name.vue' export default { components: { Name }, computed: { name () { return this.$store.getters.name }, }, } </script> |
) file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
export const state = () => ({ name: "Max", }) export const getters = { name(state) { return state.name }, } export const mutations = { changeName(state) { state.name = "Bob" }, } |