Vue實踐--v-model在組件中的應用

父組件既可以綁定自定義事件也可以綁定原生事件，只需要在事件名後加.native修飾符即可，例如

HTML部分:

<!-- 父組件上綁定原生事件需要在事件名後加.native修飾符 -->
		<my-component @click.native="alertMsg"></my-component>

JS部分：

var myApp = new Vue({
			el:"#container",
			data:{
				sum:1,
				initNum:3
			},
			methods:{
				// 這裏的t就是從this.$emit("getall",this.total)上面傳下來的this.total
				getSum:function(t){
					this.sum+=t
				},
				alertMsg:function(){
					alert("我是組件上原生事件觸發的")
				}
			}
		})

當點擊組件的時候會彈出“我是組件上原生事件觸發的”的提示框；

V-model在父子組件中的應用

HTML部分：

<my-component1 v-model="initNum"></my-component1>
		<p>當前initNum的值爲：{{initNum}}</p>	

JS部分：

Vue.component("my-component1",{
			template:"<button @click='getAll' type='button'>add</button>",
			data:function(){
				return {
					totals:2
				}
			},
			methods:{
				getAll:function(){
					this.totals=this.totals+1;
					this.$emit("input",this.totals*6)
				}
			}
		})
		var myApp = new Vue({
			el:"#container",
			data:{
				sum:1,
				initNum:3
			},
			methods:{
				// 這裏的t就是從this.$emit("getall",this.total)上面傳下來的this.total
				getSum:function(t){
					this.sum+=t
				},
				alertMsg:function(){
					alert("我是組件上原生事件觸發的")
				}
			}
		})

以上，當點擊子組件的時候會直接觸發父組件上的input事件（雖然沒有直接寫，而是用v-model代替的，但是不要忘了，v-model的效果可以通過input事件模擬實現），把this.totals*6傳遞給了initNum（在這裏，v-model綁定的值永遠等於傳遞過來的參數的值），從而改變了initNum的值。

其實從某種程度上說，v-model就是組件自定義事件中的一個特殊情況，只不過在這裏的自定義事件變成了input而已，能做的事情還比較少吧（從目前來看，個人見解）；

實現一個具有雙向綁定的v-model組件要滿足兩個要求：
1.接收一個value屬性（父親中的屬性傳遞給子組件（v-bind:value），父組件v-model綁定一個值），
2.在有新的value的時候觸發input事件，這裏包含兩層意思，其一給子組件綁定input事件（你懂的），當該事件觸發的時候，把子組件中的input框的值傳遞給父組件($emit("input",event.target.value))，此時父組件中v-model綁定的值會發生改變（子組件影響父組件中的值）,因爲v-model是雙向綁定的，所以Vue實例中的對應數據也會發生變化，然後你懂的.....。
通過父組件影響子組件的值：這就需要通過事件來完成（畢竟父組件不是一個表單元素，不能直接v-model），綁定的數據的變化，因爲父子組件的數據通信是單向的（props），把父組件通過props傳遞過來的屬性給綁定到子組件的value屬性，肯定也會發生變化。因此就是雙向的。