開発者ドキュメント

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値の入力を含むテンプレートを設定します。

DatePicker.vue
<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.vuemonthおよびyearプロパティから値をバインドおよび追加します。ファイル:

WrapperComponent.vue
<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ファイルに使用されます。

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属性を入力に設定して、カスタムコンポーネントからの値を受け入れて更新します。

StringDatePicker.vue
<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トピックページをご覧ください。

モバイルバージョンを終了