元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

【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!'
  }
})

参考サイト