vue 自定義元件v model實現雙向繫結

2021-10-21 13:54:04 字數 633 閱讀 1872

官方文件

2.2.0 新增

型別:
詳細:

允許乙個自定義元件在使用 v-model 時定製 prop 和 event。預設情況下,乙個元件上的 v-model 會把 value 用作 prop 且把 input 用作 event,但是一些輸入型別比如單選框和核取方塊按鈕可能想使用 value prop 來達到不同的目的。使用 model 選項可以迴避這些情況產生的衝突。

example:

vue.

component

('my-checkbox',,

props:},

// ...

})

"foo" value=

"some value"

>

<

/my-checkbox>

上述**相當於:

:checked=

"foo"

@change=

"val => "

value=

"some value"

>

<

/my-checkbox>

vue 自定義元件使用v model

是我們常用的雙向繫結方法,如果在自定義元件中如何使用v model進行雙向繫結呢?首先我們必須要清除v model繫結的原理如下 其實v model的語法糖是這樣包裝而成的 而乙個元件上使用時則會簡化成這樣子 因此,對於乙個帶有 v model 的元件 核心用法 它應該如下 1 帶有v model的...

vue 自定義元件使用v model

v model指令其實是下面的語法糖包裝而成 在乙個元件上使用 v model 時,會簡化為 因此,對於乙個帶有v model的元件,它應該如下 利用 emit 觸發 input 事件 this.emit input value 元件1 vue.component my component prop...

vue 自定義元件使用v model

父元件 使用 v model 子元件 預設 需要props value的屬性,需要乙個方法 進行如下操作,input是 this.emit input input.value 就是 介面觸發子元件某個事件 提交引數到父元件 input事件 父元件v model 子元件value屬性 有這麼乙個流程 ...