カスタムVue.jsコンポーネントにv-modelサポートを追加する方法
序章
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トピックページでその他の演習やプロジェクトを確認してください。