【Vue.js】コンポーネントでv-modelを使う

コンポーネントでv-modelを使う方法について書きます。v-modelをそのまま使うのではなく、v-bind:valueとv-on:inputに置き換えて実現します。

v-modelとv-bind:value,v-on:input

v-modelは、v-bind:valueとv-on:inputで書き換えできます。

<input v-model="message">

上記のコードは、下記に書き換えられます。

<input
  v-bind:value="message"
  v-on:input="message = $event.target.value"
>

以上を踏まえて、コンポーネントでv-modelを実現します。

コンポーネントでv-modelを使う

v-bind:valueとv-on:inputを使い、コンポーネントでv-modelを実現します。

<div id="app">
  <p>{{ message }}</p>
  <custom-input
    v-bind:value="message"
    v-on:input="message = $event"
  ></custom-input>
</div>

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

v-bind:valueとv-on:inputは、v-modelに書き換えできるので、HTML側は以下のように記述できます。

<div id="app">
  <p>{{ message }}</p>
  <custom-input v-model="message"></custom-input>
</div>

最終的な記述

コンポーネントでv-modelを使う最終的な記述は、以下です。

<div id="app">
  <p>{{ message }}</p>
  <custom-input v-model="message"></custom-input>
</div>

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

参考サイト

• コンポーネントの基本 — Vue.js