序章
The v-model ディレクティブは、Vue.jsにバンドルされている数少ないディレクティブの1つです。 このディレクティブにより、データとビュー間の双方向のデータバインディングが可能になります。
双方向のデータバインディングを使用すると、入力フィールドやその他のコントロールを介してデータを更新するときに、DOMの作業を行わなくてもDOM（ドキュメントオブジェクトモデル）を変更できます。
この記事では、このディレクティブがどのように機能するかを調べ、独自のコンポーネントに使用します。
方法を理解する v-model 内部で動作します
HTMLの知識から、次のことがわかります。 input, select、 と textarea アプリケーションにデータを供給する主な方法です。
為に v-model 動作するには、問題の要素またはコンポーネントが小道具を受け取ることを期待します（デフォルトは value）また、イベントを発行します（デフォルトは input).
要素に応じて、Vueはデータをリッスンして処理する方法を決定します。 為に input 要素、あなたは使うかもしれません v-model このような：
<input v-model="email" />
v-model これに変換されます：
<input :value="email" @input="e => email = e.target.value" />
Vueはこの拡張を使用して処理します textarea, select、およびその他 input 種類。
ラジオボタンとチェックボックスの場合、Vueはそれらを使用します checked 小道具と彼らの耳を傾ける change イベント。
次のような要素の場合 select 複数の値を受け入れることができるタグとチェックボックス、Vueは選択された値の配列を自動的に返します。
追加する v-model カスタムコンポーネントへ
コンポーネントをサポートさせるには v-model 双方向バインディング、コンポーネントは受け入れる必要があります value 小道具と放出 input イベント。
というサンプルコンポーネントを作成しましょう basic-input. Vueの単一ファイルコンポーネントを使用します。
<template>
<input @input="handleInput" />
</template>
<script>
export default {
prop: ['value'],
data () {
return {
content: this.value
}
},
methods: {
handleInput (e) {
this.$emit('input', this.content)
}
}
}
</script>
サポートするには v-model、コンポーネントは value 小道具と放出 input イベント。
次のようなコンポーネントを使用します。
<basic-input v-model="email" />
これにより、カスタムコンポーネントはサポートします v-model 双方向バインディング。
カスタマイズ v-model prop と event
さらに一歩進んでみましょう。 デフォルトを使用したくない場合があります event と prop 追加する必要があります v-model コンポーネントのサポート。 ありがたいことに、Vueではカスタマイズが可能です。
カスタマイズするには event と「小道具、私たちは追加します model コンポーネントにプロパティを設定し、次のように新しい値を定義します。
// ...
export default {
prop: ['hidden'],
model: {
prop: 'hidden',
event: 'blur'
}
methods: {
handleInput (value) {
this.$emit('blur', value)
}
}
}
// ...
今回は、次のようなコンポーネントを使用すると、次のようになります。
<basic-input v-model="email" />
Vueは自動的に次のように変換します。
<basic-input :hidden="email" @blur="e => email = e.target.value" />
これを設定すると、コンポーネントの小道具やイベントを定義するときに競合を回避できます。
使用する v-model の上 contenteditable
contenteditable要素は div または、入力として機能するように構成できる同様の要素。
コンテンツの編集可能な要素を定義するには、 contenteditable 要素の属性：
<div class="editor" contenteditable="contenteditable"></div>
WYSIWYG エディターのコンテンツ編集可能要素は、操作が簡単で、大量のブラウザーでサポートされているため、使用します。
v-model コンテンツの編集可能な要素で機能しますが、要素のコンテンツを明示的に使用する必要があります。そうしないと、コンテンツが出力されません。
コンテンツを発行するには、 innerText また innerHTML の div. だから、私たちの updateInput メソッドは次のようになります。
updateInput () {
this.$emit('input', this.$el.innerText)
}
ルート要素のコンテンツの代わりに、refのコンテンツを使用することもできます。
これが整ったら、 v-model コンテンツの編集可能な要素に対して機能します。 更新することもできます this.content の中に updateInput 方法。
結論
これで、使用方法を確認できました v-model カスタムVueコンポーネントを使用すると、使用が必要なコンポーネントをビルドまたはリファクタリングできます。 v-model.
詳細については、 v-model の公式ドキュメントを参照するか、Vue.jsトピックページでその他の演習やプロジェクトを確認してください。
