みなさんこんにちは、かじりです。v-modelはv-bind:valueとv-on:inputのsyntax sugarだということを、たびたび忘れてしまうので記事にしました。
例えば、以下２つは同じことを表しています。
<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>
ただし、コンポーネントは以下のように定義しなくてはいけません
このようになります
<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>