效果圖如下:
這裏左右兩個按鈕都是組件，每次點擊時組件內部觸發click事件，使count值加1，同時觸發外部事件，使sum值加
1
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{sum}}</div>
<wang v-on:deliver="addSum"></wang>
<wang v-on:deliver="addSum"></wang>
</div>
<script type="text/javascript">
Vue.component("wang",{
template:"<button v-on:click='add'>{{count}}</button>",
// 這裏data需要定義成函數後返回，如果採用字面量寫法可能會造成變量污染
data(){
return {
count:0
}
},
methods:{
add(){
this.count++;
// 組件內部觸發點擊事件時,同時通過$emit方法觸發外部自定義事件deliver,這裏子組件其實與外部完全解耦了,只是執行內部事件時，同時觸發外部事件。
this.$emit("deliver");
}
}
});
new Vue({
el:"#app",
data:{
sum:0
},
methods:{
addSum(){
this.sum++;
}
}
});
</script>
</body>
</html>