Vueカスタムコンポーネントのv-modelを分析します。

3252 ワード

vue カスタムコンポーネント v モデル

最近vueを勉強していますが、今日はカスタムイベントのフォーム入力コンポーネントを見て、悩んでいます。
v-model文法飴
v-modelはフォーム入力の双方向バインディングを実現しています。私たちは通常このように書きます。


 <div id="app">
   <input v-model="price">
 </div>
 new Vue({
   el: '#app',
   data: {
     price: ''
   }
 });

この文でprice変数と入力値の双方向バインディングを実現します。
実際にはv-modelは文法飴だけです。本当の実現はこうです。


 <input type="text" 
　　　　　　:value="price" 
　　　　　　@input="price=$event.target.value">

以上のコードはいくつかのステップに分けられます。
1.入力ボックスの値をprice変数に結び付ける。これは一方向結合であり、price変数の値を変えるとinputのvalueを変えることができるという意味であるが、valueを変えるとpriceを変えることができない。
2.inputイベント（input入力ボックスにはこのイベントがあり、コンテンツを入力するとイベントが自動的にトリガされる）を傍受し、入力ボックスに内容を入力すると、一方的にpriceの値を変更する。
このようにして二重結合が実現された。
カスタムフォーム入力コンポーネント
私たちは普段inputを書いても上のように複雑ではなく、直接v-modelを使ってもいいですが、このシンタックス飴を研究するなら、他の用途があります。


<div id="app">
   <input-price v-model="price"></input-price>
 </div>
 Vue.component('input-price', {
   template: '<input type='text'>'
 });
 new Vue({
   el: '#app',
   data: {
     price: ''
   }
 });

上のは私達のカスタムフォームの入力のコンポーネントで、私達は直接v-modelで双方向のバインディングを実現することができますか？できれば、あなたはToo youngです。
まず私達のv-model文法によって飴を見ます。
1.私たちのサブコンポーネントのvalueは、親のコンポーネントから送られた値を結び付けて、サブコンポーネントのpropsで受信する必要があります。
2.サブコンポーネントに新しい入力がある場合は、親コンポーネントのinputイベントをトリガし、新しい値をパラメータとして親コンポーネントに渡す必要があります。


<div id="app"> 
   <!-- <price-input v-model="price"></price-input> -->
 
   <!--      v-model     -->
   <!-- 3、    input     ，             price -->
   <!-- 4、   value     price -->
   <price-input :value="price" @input="onInput"></price-input>
   <p>{{price}}</p>
 </div>
 Vue.component('price-input', {
   // 5、     value   props      
   // 1、              input  
   template: '<input :value="value" @input="updateVal($event.target.value)" type="text">',
   props: ["value"], 
   methods: {
      updateVal: function(val) {
       // 2、        input          
       this.$emit('input', val); 
     }
   }
 });
 var app = new Vue({
   el: '#app',
   data: {
     price: ''
   },
   methods: {
      onInput: function(val) {
        this.price = val;
      }
    }
 });

いくつかのステップをメモしました。
1.データ入力があると、このコンポーネントのinputイベントがトリガされます。
2.親コンポーネントのinputイベントを手動でトリガし、親コンポーネントに値を送る
3.親コンポーネントのinputイベントがトリガされ、親コンポーネントの変数priceに送信された値を与え、親要素への入力ボックスvalueのpriceの一方向結合を実現する。
4.親コンポーネントvalueの値をpriceに結び付ける
5.親コンポーネントのvalue値をpropsを通じてサブアセンブリに伝達し、親コンポーネントのpriceからサブアセンブリvalueへの一方向バインディングを実現した。
ちょっとまとめてみます。
•v-bindは一方向のバインディングしかできません。
•v-model(v-bind+トリガのinputイベント)は双方向バインディングを実現します。
以上は小编で绍介した浅分析Vueカスタムコンポーネントのv-modelです。皆様のために役に立つと思います。

Spring-boot統合pg、monto多データ源過程詳細解

AnglarJsは携帯電話の番号を最新検証しました。