v-model本質上是 :value和v-on的結合體，就是繫結他的value,通過v-on觸發，從而更新資料

雙向繫結得的實現主要依賴於Object.defineProperty(),通過這個函式可以監聽到get,set事件

其中observer是最主要的部分，用Object.defineProperty來實現資料的劫持，然後用他的set,get方法來通知訂閱者，觸發update方法，從而實現更新檢視

訂閱者模式：每一個{{name}} v-model=‘name’都會新增一個訂閱者，從而監聽不同部分的變化，每一部分變化時都會迴圈觸發相應的訂閱者，更新到頁面中。

v-model只是一個語法糖

<input v-model="something">
只是一個語法糖
<input v-bind:value="someting" v-on:input="something = $event.target.value">

相當於
<custom-input v-bind:value="something" v-on:input="something = arguements[0]
 
"></custom-input> 
<input v-bind:value="someting" v-on:input="something = $event.target.value">

真正實現還是靠

• 接受一個value屬性
• 在有新的value時觸發input事件

如何讓v-model繫結的值接受到資料呢?

<div id="app>
	<input v-model="message" placeholder="edit me">
	<p>Message is: {{ message }}</p>
</div>
<script>
var vm = new Vue({
	el: '#app',
	methods:{
		  ......
		  //通過input事件發出數值
		  this.$emit('input', Number(formattedValue))
		}
})
</script>
 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

也就是自定義的元件內部一般包含原生的表單元件(當然非表單的元件也可以)

然後,給原生控制元件繫結事件,捕捉到原生元件的值,利用$emit方法,觸發input方法,元件監聽到input事件然後把值傳入到message中.

為什麼是input呢?

因為在vue中, 使用了v-model的元件會自動監聽input事件,
並把這個input事件所攜帶的值 傳遞給v-model所繫結的屬性.
這樣元件內部的值就給到了父元件了

如何利用v-model實現自定義的表單元件:
監聽原生元件的事件,當獲取到原生元件的值後把 值通過呼叫$emit('input' ,data)方法去觸發input事件