Vue.jsのカスタムコンポーネントに双方向データバインディングを追加する方法
序章
この記事では、Vue.jsのカスタムコンポーネントにv-model
ディレクティブを追加する方法について学習します。 v-model
ディレクティブは、バニラVue.jsコンポーネントに双方向のデータバインディングを追加するための強力なアセットですが、カスタムコンポーネントのサポートはそれほど効果的ではありません。
前提条件
Vue.jsでの双方向のデータバインディングを理解することをお勧めしますが、必須ではありません。 双方向データバインディングの詳細については、Vue.jsチュートリアルでの双方向バインディングにv-modelを使用する方法を確認してください。
v-model
ディレクティブの実装
コンポーネントにv-model
サポートを実装する方法を理解するには、内部でどのように機能するかを理解する必要があります。 v-model="prop"
の値は、:value="prop" @input="prop = arguments\[0\]"
の省略形です。
そのため、コンポーネントをv-model
ディレクティブと互換性を持たせるには、:value
および@input
属性を受け入れて、ユーザーがVueを操作したときに値を追加および発行する必要があります。 jsアプリケーション。
DatePicker.vue
ファイルで、オブジェクトのmonth
およびyear
値を受け入れるカスタムコンポーネントを作成します。 :value
および@input
属性は、コンポーネントで参照される値を表します。 month
およびyear
値の入力を含むテンプレートを設定します。
<template>
<div class="date-picker">
Month: <input type="number" ref="month-picker" :value="value.month" @input="updateDate()"/>
Year: <input type="number" ref="year-picker" :value="value.year" @input="updateDate()"/>
</div>
</template>
<script>
export default {
props: ['value'],
methods: {
updateDate() {
this.$emit('input', {
month: +this.$refs.monthPicker.value,
year: +this.$refs.yearPicker.value
})
}
}
};
</script>
script
タグ内で、カスタムメソッドupdateDate()
は、.$emit()
パブリックインスタンスプロパティを適用して、month
およびyear
の値をに基づいて更新します。ユーザー入力。
他のVue.jsファイルでカスタムコンポーネントを使用するには、v-model
ディレクティブを設定して、WrapperComponent.vue
のmonth
およびyear
プロパティから値をバインドおよび追加します。ファイル:
<template>
<div class="wrapper">
<date-picker v-model="date-picker"></date-picker>
<p>
Month: {{date.month}}
Year: {{date.year}}
</p>
</div>
</template>
script
タグ内で、カスタムコンポーネントをインポートし、components
プロパティに挿入します。 これにより、DatePicker
コンポーネントに含まれている機能がWrapperComponent.vue
ファイルに使用されます。
<script>
import DatePicker from './DatePicker.vue';
export default {
components: {
DatePicker
},
data() {
return {
date: {
month: 1,
year: 2017
}
}
}
})
</script>
data()
モデルは、month
およびyear
プロパティに値を格納して返します。
確認するには、カスタムコンポーネントを使用した双方向バインディングでは、属性:value
および@input
を使用して、1回の呼び出しで更新された日付を追加および発行する必要があります。
高度なコンポーネントでv-model
を練習する
1つ以上の計算されたプロパティを使用することにより、文字列などのデータを、要素が管理できるフォーマット入力に統合できます。 これは、さまざまな潜在的な入力形式を処理する高度なカスタムコンポーネントでよく使用されます。
StringDatePicker.vue
ファイルで、構造m/yyyy
の文字列を渡すカスタムコンポーネントを作成します。 :value
および@input
属性を入力に設定して、カスタムコンポーネントからの値を受け入れて更新します。
<template>
<div class="date-picker">
Month: <input type="number" ref="monthPicker" :value="splitDate.month" @input="updateDate()"/>
Year: <input type="number" ref="yearPicker" :value="splitDate.year" @input="updateDate()"/>
</div>
</template>
計算されたプロパティ(この場合はsplitDate
)を使用すると、入力文字列をmonth
およびyear
プロパティを持つオブジェクトに分割して返すことができます。
[label StringDatePicker.vue]
<script>
export default {
props: ['value'],
computed: {
splitDate() {
const splitValueString = this.value.split('/');
return {
month: splitValueString[0],
year: splitValueString[1]
}
}
},
methods: {
updateDate() {
const monthValue = this.$refs.monthPicker.value;
const yearValue = this.$refs.yearPicker.value;
this.$emit('input', `${monthValue}/${yearValue}`);
}
}
};
</script>
methods
オブジェクトは、プロパティupdateDate()
を適用して、入力文字列から更新されたmonth
およびyear
を発行します。 StringDatePicker
高度なカスタムコンポーネントを別のファイルにインポートし、v-model
ディレクティブを操作して、month
およびyear
プロパティから値をバインドおよび追加できるようになりました。一度。
結論
v-model
ディレクティブは、カスタムVue.jsコンポーネントに実装されたときに追加の機能を提供します。 双方向のデータバインディングを高度なカスタムコンポーネントに統合して、データ型を正確な形式に操作することもできます。
Vue.jsの詳細については、Vue.jsトピックページをご覧ください。