Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<body>
<!--parent component uses props to pass data to subcomponents, but uses custom events if the subcomponents are going to pass the data back! -
<div id= "App" >
<p>{{total}}</p>
<button-counter v-on:increment= ' incrementtotal ' ></button-counter>
<button-counter @increment = ' incrementtotal ' ></button-counter>
</div>
</body>
<script type= "Text/javascript" src= "Vue.js" ></script>
<script type= "Text/javascript" >
Vue.component (' Button-counter ', {
Template: ' <button v-on:click= ' increment ' >{{counter}}</button> ',
Data:function () {
return {
counter:0
}
},
methods:{
Increment:function () {
This.counter +=1;
//$emit (' Increment1 ', [s], ' KKK '), directly see if there is any, can tell you first, is to trigger the custom event Increment1 (or function name bar), [] for the parameter
This . $emit (' increment ')
}
}
})
var app = new Vue ({
El: ' #app ',
data:{
total:0
},
methods:{
Incrementtotal:function () {
This.total + = 1;
}
}
})
</script>
The understanding of $emit in Vue.js
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
