vue元件應用v model

2021-08-29 02:03:02 字數 1515 閱讀 1193

一、input上的v-model原理

vue中的v-model最常用的就是在input節點上，像下面這樣：

"text" v-model=


"message"


>
v-model實際上是一種資料和方法繫結的語法糖

"text"


:value=


"message" @input=


"message = $event.target.value"


>
當然也可以使用自定義方法進行事件繫結

"text"


:value=


"value" @input=


"sendmessage($event.target.value)"


>
二、組建上應用v-model

在parent父元件中使用child子元件，並進行雙向資料繫結

"message"


>


<


/child>
結合上面input的解析，這裡實際上也是一種語法糖

"message" @input=


"message = $event"


>


<


/child>
注意這裡取值是$event,而不是$event.target.value,這是因為這裡的v-on:input實際上是子元件向父元件發射的事件名稱。

溫習一下子元件向父元件傳遞發射事件並附值的用法：

在父元件中繫結乙個事件，通過$event獲取到子元件傳遞過來的值

"getmessage($event)"


>


<


/child>
然後在子元件中觸發trans-message事件

"$emit('trans-message', 'hello')"


>


<


/button>
tip: 自定義的方法一定要使用『「-」 連線符來命名，不能使用駝峰命名的方式。

那麼，在元件中使用 v-model 時，就需要我們在子元件中向父元件發射 input 事件。

child模板：

"text"


:value=


"value" @input=


"$emit('input', $event.target.value)"


>
同時需要在child元件中定義prop:

props:


['value'


]
至此，就可以實現在元件上應用v-model實現雙向資料繫結。

詳情參考vue官方文件

vue表單應用 v model

v model只能用於 input select textarea這些表單元素上實現雙向資料繫結。所謂雙向書資料繫結，指的是在vue物件中的data與其繫結的dom元素的內容保持一致。兩者無論誰被改變，另乙個也相應改變。因為表單元素展現資料的方式不同，在實現雙向資料繫結時，vue會根據不同的控制項型...

vue元件上使用v model

v model實現資料雙向繫結，其實現原理為 value params input params event.target.value v model語法糖 自己寫了個demo，如下 父元件在這 testtext testchild div template import testchild fro...

Vue 在元件中使用 v model

參考 自定義事件 custom event 還可以用來建立出 實現 v model 機制的自定義輸入框 custom input 回顧前面章節中 等同於如下 而用於乙個元件時，v model 則可以替換為如下 為了元件內部能夠有效執行，元件內的 必須 將 value 屬性繫結到 value prop...