v-model語法糖在組件中的使用

原文地址

v-model 主要是用於表單上數據的雙向綁定

一：基本

1:主要用於 input，select，textarea，component

2:修飾符：

    .lazy- 取代input監聽change事件

    .number- 輸入字符串轉爲數字

    .trim- 輸入首尾空格過濾

二：語法糖

    <input type="text" v-model="mes">  此時mes值就與input的值進行雙向綁定

    實際上上面的代碼是下面代碼的語法糖。

    <input  v-bind:value="mes"  v-on:input="mes= $event.target.value"/>

    要理解這行代碼，首先你要知道 input 元素自己有個 oninput 事件，這是 HTML5 新增長的，相似     onchange ，每當輸入框內容發生變化，就會觸發 oninput ，把最新的value傳遞給 mes。從而實      現了v-model

三：v-model用在組件上的時候

咱們知道v-model能夠實現數據的雙向綁定，可是，若是說這是一個複雜的輸入框，在項目中也常用。此時咱們咱們就把這個1輸入框封裝成組件，那怎麼利用v-mode讓父組件的值與子組件input框裏的值雙向綁定起來。看下面的例子

1：父組件

                <InputBox v-model="mes"></InputBox>

            根據上面講的v-model語法糖，因此 InputBox那行代碼也能夠寫成

            <InputBox v-bind:value="value"   v-on:input="mes= $event.target.value"></InputBox>

2：子組件

 

因此說：1：接受一個value  prop    2：在有新的值時觸發input事件並將新值做爲參數  。這樣，咱們就能夠看到子組件和父組件的值就能夠聯動起來。可是咱們看到v-model中的事件是input,若是碰到單選複選按鈕這種check事件，那咱們就須要去自定義v-model,咱們來看看第四節

四：v-model自定義。

1：父組件仍是同樣的寫

<InputCheckout v-model="foo"></InputCheckout>

可是單選複選框不會觸發input事件，只會觸發change事件。因此在子組件咱們須要自定義v-model。咱們來看看代碼哈

2：

 

 

這樣就能夠了

---

返回目錄