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

 

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

　　

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

 

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

　　

上面代碼中

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

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

　　

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

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

　　

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

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/