自定義事件 event up
我們知道臭杰，父組件是使用 props 傳遞數(shù)據(jù)給子組件耻警，但如果子組件要把數(shù)據(jù)傳遞回去幽纷，應(yīng)該怎樣做？那就是自定義事件劝术！
-
每個(gè) Vue 實(shí)例都實(shí)現(xiàn)了事件接口(Events interface)缩多，即：
- 使用 $on(eventName) 監(jiān)聽事件
- 使用 $emit(eventName) 觸發(fā)事件
另外计螺，父組件可以在使用子組件的地方直接用 v-on 來監(jiān)聽子組件觸發(fā)的事件。
一個(gè)簡單的官方案例幫助我們來理解：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<p>{{ total }}</p>
<button-counter v-on:clickcounter="clicktotal"></button-counter>
<button-counter v-on:clickcounter="clicktotal"></button-counter>
</div>
<script src="js/vue.js"></script>
<script>
// 1. 定義子組件
Vue.component('button-counter', {
template: '<button v-on:click="clickcounter">
{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
clickcounter: function () {
this.counter += 1;
// 觸發(fā)事件
this.$emit('clickcounter');
}
}
})
new Vue({
el: '#app',
data: {
total: 0
},
methods: {
clicktotal: function () {
this.total += 1;
}
}
})
</script>
</body>
</html>
運(yùn)行結(jié)果：子組件已經(jīng)和它外部完全解耦了瞧壮。它所做的只是觸發(fā)一個(gè)父組件關(guān)心的內(nèi)部事件登馒。
<strong>父組件模板的內(nèi)容在父組件作用域內(nèi)編譯；子組件模板的內(nèi)容在子組件作用域內(nèi)編譯</strong>
- 上面話的意思在于：在子組件中定義的數(shù)據(jù)咆槽，只能用在子組件的模板陈轿；在父組件中定義的數(shù)據(jù)，只能用在父組件的模板秦忿。如果父組件的數(shù)據(jù)要在子組件中使用麦射，則需要子組件定義props。
