理解在vue自定義元件中使用v model

2021-10-13 13:15:32 字數 1145 閱讀 2478

//父元件

v-model

="model.username"

>

k-input

>

//子元件

type

="text"

:value

="inputvalue"

@input

="oninput"

>

//子元件

export

default;}

, props:},

methods:

}}

我們都知道,父元件中的v-model是語法糖,是v-bind@input兩者的結合,,看了網上的資料,會轉換成以下的形式

//父元件

:inputvalue

="model.username"

@input

="model.username=$event"

>

k-input

>

//子元件

type

="text"

:value

="inputvalue"

@input

="oninput"

>

//子元件

export

default;}

, props:},

methods:

}}

:inputvalue="model.username"這個我懂,但這個@input="model.username=$event"是個什麼東西,$event是個什麼東西,看了一下 官網

發現$event是可以接受從子元件傳過來的值,也就是$event接收到子元件this.$emit()傳出來的引數event.target.value

vue在自定義元件中使用v model

要想解釋清楚v model在自定義元件中的用法,我們得先來看看普通的元件傳值 一 普通的元件傳值 如下 這是乙個簡單的父子,子父傳值示例 父元件 我是父元件 子元件 我是子元件 回應在上面的傳值當中我們只是父向子,子向父各傳值一次,但是需要起四個左右的名字 如果使用v model的話,還可以讓自己的...

vue 使用自定義元件

新建專案,ctrl r進入cmd,切換至工作目錄 c users asus f f cd study f study cd vue f study vue cd demo 安裝 vue cli npm install g vue cli?target directory exists.continu...

在vue自定義元件上使用v model

應用背景 在引用的元件上使用v model 我們都知道vue2.0之後,子元件不允許修改父元件傳遞的資料 prop 很多同學第乙個想到的是這樣實現 使用 emit 在子元件中發布乙個方法並將子元件的值作為引數,在父元件訂閱此方法,獲取子元件傳遞過來的值,從而實現雙向繫結在頁面中引用元件 定義plat...