在使用my-component組件時，為了實現(xiàn)雙向綁定。

Vue.component('my-component', {

props: {

obj: Object,

},

model: {

prop: 'obj',

event: 'change'

},

methods: {

onchange: function() {

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

}

}

});

上面代碼中

1.props對象中，需要定義一個能夠從外部傳入的變量，這里我定義了一個obj。這樣就可以用下面這行代碼進行傳遞值

2.為了能夠使用v-model語法糖，我們定義了model對象。model對象包含兩個屬性，一個是prop，一個是event。prop默認(rèn)是value，event默認(rèn)是input，我們這里寫model是為了改變默認(rèn)的東西，使用我們自己定義的變量。寫好之后就可以用下面這行代碼了。

3.雖然可以這么用，但還是不能從子組件傳遞數(shù)據(jù)到外部。因為change事件并沒有被觸發(fā)。這個change事件是我自定義的，所以這里需要寫一個方法onchange。方法名是次要的，主要的是里面的那行代碼。

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

這行兩個參數(shù)，第一個是事件名，和model里的event屬性的值要一樣。第二個參數(shù)是改變的值。寫第二個變量，才能改變外部的數(shù)據(jù)，實現(xiàn)雙向綁定的功能。

文筆不行，沒辦法表達(dá)出清晰的思路，貼上早上翻閱的一些有用的鏈接，以供參考。

參考：

https://jsfiddle.net/yyx990803/58kxs8tj/

https://github.com/vuejs/vue/issues/4373

http://lizhihua.me/2016/10/31/vue/component_v-model/

總結(jié)

以上是生活随笔為你收集整理的moel vue 自定义v_vue组件，自定义v-model方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。