Vue--上のVモデルのコンポーネントを使用します

まず、最近の作業工程でサブアセンブリなどの検索ボックスのうちの一人で、再利用可能なコンポーネントを考慮して、それをあいまい一致検索機能を実現しています。過去の開発において、Iは、通常、親コンポーネントイベントの値を変更し、（後に戻されるようなキーワード検索など、または検索結果）いくつかの親コンポーネントが必要なパラメータを持って入力ボックス内に放出します

次のおそらく実装：

父组件
 < テンプレート> 
    < divの> 
        < 検索@Test = "のgetData" > </ 検索> 
        < ボタン@clickは= "送信" >提交</ ボタン> 
    </ DIV > 
</ テンプレート> 
< スクリプト> 
からインポート検索" @ /コンポーネント/インデックス/ search.vue 「
輸出のデフォルト{ 
    データ（）{ 
        リターン{ 
            キーワード：''
        }  
    }、
    コンポーネント：{ 
        検索
    }、
    メソッド：{ 
        のgetData（ヴァル）{ 
            これは.keywords = ヴァル
        }、（）{
        提出
            はconsole.log（' ：キーワード' 、この.keywords）
        } 
    } 
} 
</ スクリプト> 


子组件
< テンプレート> 
    < DIV > 
        < 入力@input = "inputChange" タイプ= "text"の名= "キーワード" > 
    </ DIV >
<// テンプレート> 
< スクリプト> 
エクスポートデフォルト{ 
    小道具：[ ' キーワード' ]、
    方法：{ 
        inputChange（E）{ 
            この。$（発する' テスト' 、e.target.value）を
        } 
    } 
} 
</ スクリプト>

第二に、時間の実現で、この時間は、私は漠然と成分V-モデルを追加するには、前のVueのAPIを見たときに、それをこのように試してみたかった言及を覚えて、私は、公式ウェブサイトによると説明していることを理解します：

Vモデルこの方法は、2つの操作を行うの結合当量：（1）このコンポーネントは、プロパティの現在の値に加算（2）このコンポーネントは、入力イベントを提示するように結合され、次のようにこのように私が実装修飾：

親コンポーネント：

< テンプレート> 
    < divの> 
        < 検索V-モデルは= "キーワード" > </ 検索> 
        < ボタン@click = "提出" >提交</ ボタン> 
    </ DIV > 
</ テンプレート> 
< スクリプト> 
からインポート検索" @ /components/index/search.vue ' 
エクスポートデフォルト{ 
    データ（）{ 
        リターン{ 
            キーワード：'' 
        } 
    }、
    成分：{
        検索
    }、
    メソッド：{ 
        提出（）{ 
            はconsole.log（' キーワード：' 、この.keywords）
        } 
    } 
} 
</ スクリプト>

サブコンポーネント：

< テンプレート> 
    < divの> 
        < 入力：値= "値" @input = "$発する（ '入力'、$のevent.target.value）" タイプ= "text"の名= "キーワード" > 
    </ DIV > 
</ テンプレート> 
< スクリプト> 
エクスポートデフォルト{ 
    小道具：[ '値' ] 
} 
</ スクリプト>

第三に、要約：実際には二つの考えは同じで、すべてのサブコンポーネントが通過する親コンポーネント値によってイベントを発するが、V字モデルの形で、より直感的で簡単です -

Vue--上のVモデルのコンポーネントを使用します

おすすめ