カスタムコンポーネントを追加するには、V-モデルの双方向結合のサポートをvuejs

V-モデルに使用フロントエンドエンジニアvuejs、確かに印象的。これは、ネイティブのHTMLのtextarea、入力と非常に便利である結合双方向のデータを追加する他のネイティブ機能に似ています。しかし、あなたのカスタムVUEコンポーネントは直接V-モデルを適用することができないために、我々はいくつかの余分な作業を行う必要がありますが、この余分な作業は非常に簡単です。

コンポーネントがサポートを提供し、あなたのV-momeiydelを与える方法を理解するためには、徹底的にそれがどのように動作するかの下にV-モデル自体を理解しておく必要があります。初期のVモデルは、その神秘的な魔法のように見えますが、実際にはありません。

Vモデル= "syncedProp"

これは、次のコードと同等です

： "syncedProp = $引数[0]或者値= "syncedProp"入力= @ 
：値=" syncedProp "@入力=" syncedProp = $ event.target.value

あなたはV-モデルをサポートする必要がある場合は、独自のコンポーネントがしなければならないので、上記の2点を理解するには、次のとおりです。

プロパティの値：1。受信

2.ユーザーは@inputイベントを送るの値の値を変更した場合

達成するための根拠：

私たちは、日付ピッカーアセンブリ、アセンブリの受信年、月の価値を持っていることを前提としています{月：1、年：2019}、我々は、入力コンポーネントは、年のための2つの入力、月ザ・のための1つを、持っていることを願っていますし、ここで、V-モデルによってバインドされたオブジェクトを更新するためには、サンプルコードの実装です：

<テンプレート> 
  の<divクラス= "日付ピッカー"> 
    月：の<input type = "数" REF = "monthPicker"：値= "value.month" @入力= "updateDate（）" /> 
    年：<入力タイプ= "番号" REF = "yearPicker"値= "value.year"入力= "updateDate（）" /> @ 
  </ div> 
</テンプレート> 

<スクリプト> 
エクスポートデフォルト{ 
  小道具：[ '値' ]、

  方法：{ 
    updateDate（）{ 
      この $（ '入力'を発する。、{ 
        月： + 本。$ refs.monthPicker.value、
        年：+ この$ refs.yearPicker.value。
      }）
    } 
  } 
};
</ SCRIPT>

上記のコードの実現で、我々はそれを使用するには、次のコードのようにすることができます。

<テンプレート> 
  <DIV CLASS = "ラッパー"> 
    <日付ピッカーVモデル= "日付"> </日付ピッカー> 
    <P> 
      月：{{date.month}} 
      年：{{}} date.year
     </ P> 
  </ div> 
</テンプレート> 

の<script> 
からインポート日付ピッカー './DatePicker.vue' ; 

輸出デフォルト{ 
  コンポーネント：{ 
    日付ピッカー
  }、

  データ（）{ 
    リターン{ 
      日付：{ 
        月： 1 、
        年： 2017 
      } 
    } 
  } 
}）
 </スクリプト>

上記のサンプルコードをまとめると、我々は2つのことを行うために見ることができます：

1本の価値は、支柱をとり、そしてコンポーネントは、渡された値支柱によって現在価値に使用します

2.あなたがされている変更は、外部データバインディングを更新する必要がある外部データを通知する必要がある場合には、単に入力イベントをすることができ放出！

例のハイポイント

基本バージョンでは、上記に基づいて、我々は技術を使用する文字列のMM / yyyy形式、そして必要性は、より多くのことを行う必要がありながら、例えば、我々は、日付形式がオブジェクトフォームではありません渡され、物事はもう少し複雑にユーザが能動的に外部データへの補正データを変更する際の処理は、同様に、アウト発する文字列に結合する必要があります！

<テンプレート> 
  の<divクラス= "日付ピッカー"> 
    月：の<input type = "数" REF = "monthPicker"：値= "splitDate.month" @入力= "updateDate（）" /> 
    年：<入力タイプ= "番号" REF = "yearPicker"：入力= "updateDate（）" /> @値= "splitDate.year" 
  </ div> 
</テンプレート> 

<スクリプト> 
エクスポートデフォルト{ 
  小道具：[ '値' ]、

  計算：{ 
    splitDate（）{ 
      CONST splitValueString = この .value.split（ '/' ）。

       戻り値{ 
        月：
    } 
  }、

  メソッド：{ 
    updateDate（）{ 
      CONST monthValue = この$ refs.monthPicker.value;。
      constのyearValue = この$ refs.yearPicker.value。
      この $（ '入力'、 `$ {monthValue} / $ {yearValueを}`）を発します。
    } 
  } 
}。
</ SCRIPT>

カスタムコンポーネントを追加するには、V-モデルの双方向結合のサポートをvuejs

達成するための根拠：

おすすめ