Vue 自定義v model資料雙向繫結

age 資料單向繫結

name 資料雙向繫結

觀察**發現，name的input 多了乙個事件繫結@input="name=$event.target.value"

所以，實現資料雙向繫結的原理就是：

1、資料name單向傳遞給input；

2、input觸發事件後將name的值進行了修改

child.vue

"text"

:value=
"age" @input=
"change($event.target.value)"
>
<
/template>
export
default
, methods:}}
<
/script>

/h3>

age:
}<
/p>
age:
"age"
/>
<
/p>
<
/div>
<
/template>
import child from
'./child.vue'
;export
default
,data()
}}<
/script>啟動除錯
這樣就實現了自定義v-model語法
原理很簡單
1、父元件給子元件傳值

2、子元件值修改，觸發事件修改父元件值
3、父元件再將新值傳遞給了子元件，子元件的接收到父元件變更的值
所以還是資料還是單向流動

參考：

vue之自定義元件的v-model
vue自定義元件上的v-model如何與子元件資料繫結
 
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屬性 有這麼乙個流程 ...