轉載自??vue組件，自定義v-model方法

1	<my-component?v-model="obj"></my-component>

　

在使用my-component組件時，為了實現雙向綁定。

1234567891011121314

Vue.component('my-component', {????props: {????????obj: Object,????},????model: {????????prop:?'obj',????????event:?'change'????},????methods: {????????onchange:?function() {????????????this.$emit('change',?this.obj);????????}????}});

　　

上面代碼中

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

1	<my-component?:obj="obj對象"></my-component>

　　

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

1	<my-component?v-model="obj對象"></my-component>

　　

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

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

　　

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

?

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

?

參考：

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。