Vueと共通

【Nuxt.js】Nuxt文法編:v-model②

前置き

前回はinputtextareaなどで
基本的な使い方を解説しました!
今回は親子間での使い方がメインです🌟


基本的な使い方

親子間でv-modelをやるには工夫が必要です!

v-modelはこれと同じです💡
v-bind:value, v-on:input

値は親から受け取るprops
イベントは子自体のイベントなので
親に通知するための$emitを使用します💡

親で入力した値を
子のinputにも反映させています👀

directory

components/
--| atom/
----| inputs/
-----| InputDefault.vue

pages/
--| index.vue

解説

InputDefault.vue
  • v-bind:value="value"
    value属性をvalueプロパティにバインド
    valueはpropsで値を親からもらう

  • @input="$emit('input', $event.target.value)"
    └@input:inputした時(イベントハンドラ )
    └$emit('input'):子のイベント名inputを親に伝える
     https://note.com/aliz/n/nd6e771724cd7
    └$event.target.value:
     イベントが起きる(入力イベント)要素(input)の値を取得
     入力した値を取得できるってことです🌟
     $emitの第二引数で使えます!

コード

) components

または
v-modelのような属性自体を親に渡す
v-bind="$attrs"でもOK⭕️

) pages


コンポーネントにネイティブイベントをバインディング

子にあるinputのイベントを
親で使いたい時にどうするのか、
という話です!

.native修飾子v-onにつけます🌟

通常はinputタグのイベントなので
@inputで良いのですが
.nativeの違いを分かりやすくするために
@keyupイベントを使用してみます🍒🙋‍♀️

イベントの違い

input: 文字を入力した時(ctlとかは反応しない)
keyup: キーを押して話したとき(どのキーでも反応する)


.nativeあり

@keyupイベント(キーを離した時)を
親で検知してmethodsを発火させ
テキストを更新しています🌟

コード

) components

) pages

@keyup.native.enter
enterキーを離した時

@keyup.enter.nativeではダメなの?

それでもOKです!
ただnativeはv-onの修飾子のため
v-on:keyupの直後につけています!


.nativeなし

methodsが発火しません、、、

コード

.nativeありのコードから
.nativeを取るだけです!


まとめ

v-modelv-bind:valuev-on:inputをまとめて書ける
糖衣構文(syntax sugar)でしたね💡
あとは親子間でのデータやイベントの
受け渡しprops, $emitが分かれば
構造は把握できますね🤗

分からない所があれば
知りたい単語を右のサイドバーから
検索してみてください✨🔍

-Vueと共通

© 2020 aLiz Nuxt