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

🎈 この記事はWP専用です
https://wp.me/pc9NHC-kO

前置き

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

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

基本的な使い方

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

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

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

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

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の第二引数で使えます！

コード

InputDefault.vue

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

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

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

InputDefault.vue

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

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

input.vue

<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>

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

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

🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-kO