效果图如下:
这里左右两个按钮都是组件，每次点击时组件内部触发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>