vue元件,自定義v model方法

2022-02-14 06:27:46 字數 665 閱讀 2774

在使用my-component元件時,為了實現雙向繫結。

vue.component('my-component', ,

model: ,

methods:

}});

上面**中

1.props物件中,需要定義乙個能夠從外部傳入的變數,這裡我定義了乙個obj。這樣就可以用下面這行**進行傳遞值

2.為了能夠使用v-model語法糖,我們定義了model物件。model物件包含兩個屬性,乙個是prop,乙個是event。prop預設是value,event預設是input,我們這裡寫model是為了改變預設的東西,使用我們自己定義的變數。寫好之後就可以用下面這行**了。

3.雖然可以這麼用,但還是不能從子元件傳遞資料到外部。因為change事件並沒有被觸發。這個change事件是我自定義的,所以這裡需要寫乙個方法onchange。方法名是次要的,主要的是裡面的那行**。

this.$emit('change', this.obj);

這行兩個引數,第乙個是事件名,和model裡的event屬性的值要一樣。第二個引數是改變的值。寫第二個變數,才能改變外部的資料,實現雙向繫結的功能。

參考: 

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屬性 有這麼乙個流程 ...