v-modelはsyntax sugar(糖衣構文)

December 31, 2020

commit history
  1. 2020/11/21 23:55:28 8584f46
headline

例えば、以下2つは同じことを表しています。

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

コンポーネントで使う場合は?

コンポーネントで使用する場合はこのようになります。

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

ただし、コンポーネントは以下のように定義しなくてはいけません

  • value属性をvalue propにバインドする
  • 入力時に新しい値で独自のカスタムイベントを発行する

このようになります

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

<script>
export default {
  props: ['value']
}
</script>

これでv-modelはこのコンポーネントで完全に動作します

<custom-input v-model="searchText"></custom-input>

codesandbox

参照先

https://jp.vuejs.org/v2/guide/components.html#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%A7-v-model-%E3%82%92%E4%BD%BF%E3%81%86


contact