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

前置き

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

【Nuxt.js】Nuxt文法編：v-model①

基本的な使い方

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

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

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

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

解説

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

<template>
 <input
   :value="value"
   @input="$emit('input', $event.target.value)"
 >
</template>

<script lang="ts">
export default {
 props: {
   value: {
     type: String,
     // ここは影響しない
     default: 'ハロー'
   }
 },
}
</script>

<input

:value="value"

@input="$emit('input', $event.target.value)"

</template>

export default {

props: {

value: {

type: String,

// ここは影響しない

default: 'ハロー'

}

</script>

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

<template>
 <input
   v-bind="$attrs"
   @input="$emit('input', $event.target.value)"
 >
</template>

<script lang="ts">
export default {
 props: {
   value: {
     type: String,
     // ここは影響しない
     default: 'ハロー'
   }
 },
}
</script>

<input

v-bind="$attrs"

@input="$emit('input', $event.target.value)"

</template>

export default {

props: {

value: {

type: String,

// ここは影響しない

default: 'ハロー'

}

</script>

) pages

<template>
 <div class="page">
   <form @submit.prevent>
     <InputDefault
       v-model="message"
     />
     <button
       @click="submit(message)"
     >
       送信
     </button>
   </form>
 </div>
</template>

<script>
import InputDefault from '~/components/atom/inputs/InputDefault.vue'

export default {
 components: {
   InputDefault,
 },
 data () {
   return {
     message: 'メッセージ',
   }
 },
 methods: {
   submit (message) {
     console.log(message)
   },
 },
}
</script>

<InputDefault

v-model="message"

<button

@click="submit(message)"

送信

</button>

</form>

</div>

</template>

import InputDefault from '~/components/atom/inputs/InputDefault.vue'

export default {

components: {

InputDefault,

data () {

return {

message: 'メッセージ',

}

methods: {

submit (message) {

console.log(message)

}

</script>

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

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

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

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

イベントの違い

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

.nativeあり

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

コード

) components

<template>
  <input
    v-bind="$attrs"
    v-on:input="$emit('input', $event.target.value)"
  >
</template>

<script lang="ts">
export default {
  props: {
    value: {
      type: String,
      default: 'ハロー'
    }
  },
}
</script>

<input

v-bind="$attrs"

v-on:input="$emit('input', $event.target.value)"

</template>

export default {

props: {

value: {

type: String,

default: 'ハロー'

}

</script>

) pages

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

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

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

<template>
  <div class="page">
    <InputDefault
      v-model="value"
      @keyup.native.enter="pushItem"
    />
    <p>{{ value }}</p>
  </div>
</template>

<script>
import InputDefault from '~/components/atom/inputs/InputDefault.vue'

export default {
  components: {
    InputDefault,
  },
  data () {
    return {
      value: '',
    }
  },
  methods: {
    pushItem () {
      this.value = 'pushItem!'
    },
  },
}
</script>

<InputDefault

v-model="value"

@keyup.native.enter="pushItem"

<p>{{ value }}</p>

</div>

</template>

import InputDefault from '~/components/atom/inputs/InputDefault.vue'

export default {

components: {

InputDefault,

data () {

return {

value: '',

}

methods: {

pushItem () {

this.value = 'pushItem!'

}

</script>

.nativeなし

methodsが発火しません、、、

コード

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

まとめ

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

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