VUEカスタムコンポーネントVモデル

　　コンポーネントcalled`の[値]に `V-model`デフォルトは小道具（プロパティ）を使用し、入力の名前を付けられますが、ラジオボタン、チェックボックスと入力コントロールの他のタイプかもしれない[値]プロパティなどのイベント異なる目的のために。この時点で、私たちは、 `model`オプションを設定することで、時間のコンポーネントを定義することができます別のアプローチを実装するために使用することができます。

　　コンポーネントを作成する場合、 `すなわち、構成する2つのプロパティが含まmodel`プロパティを追加します。

イベント：Vモデルの動作をトリガーします
小道具：プロパティ値にバインドされているV-モデルに渡された変数の定義

ここではカウンターの効果を達成するためのコードは次のとおりです。

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 

< 頭> 
    < メタ文字コード= "UTF-8" > 
    < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
    < スクリプトSRC = "https://cdn.jsdelivr.net/npm/vue" > </ スクリプト> 
    < タイトル> VUE自定义组件Vモデル</ タイトル> 
</ ヘッド> 

< 身体>
    > 
        < ステッパーVモデル= "goodsCount" > </ ステッパ> 
    </ DIV > 
    < スクリプト> 
        Vue.component（' ステッパー' 、{ 
            小道具：[ ' カウント' ]、
            テンプレート： ` 
            < DIV > 
                < ボタン@click = " サブ" > - < / ボタン> 
                < スパン> {{カウント}} < / スパン> 
                <ボタン@click = " アドオン" > + < / ボタン> 
            < / div> 
        `、
            モデル：{ 
                // イベント：Vモデルの挙動をトリガします
                ：イベント' 変更-COUNTを' 、
                 // Vモデルに渡された変数がバインドされている定義その上属性値
                プロップ：「COUNT 」
            }、
            メソッド：{ 
                サブ（）{ 
                    // モデル上で定義されたトリガのトリガ名
                    // 長いライン上の最終結果としてアウト通過するように、本明細書において値this.countを変更する必要はありません
                    、これを。 EMIT $（" 変更-COUNT " 、この.count -  1）
                }、
                追加（）{ 
                    この。$ EMIT（" 変更回数" 、この.count +  1 ）
                } 
            } 
        }）
        新しいヴュー（{ 
            EL：" #app " 、
            データ：{ 
                goodsCount：0 
            } 
        }）
    </ スクリプト> 
</ ボディ> 

</ HTML >

VUEカスタムコンポーネントVモデル

おすすめ