When the sub-assembly needs to pass data to the parent element, it is necessary to use custom components.
Parent component can also be used v-once directly on the custom label sub-assemblies to listen custom event subcomponents triggered.
<div id="app">
<P> Total: {{total}} </ p>
<my-component @increase="handleGetTotal"
@reduce="handleGetTotal"></my-component>
</div>
<script>
Vue.component("my-component",{
template:`<div>
<button @click="handleIncrease">+1</button>
<button @click="handleReduce">-1</button>
</div>`,
data(){
return{
counter:0
}
},
methods:{
handleIncrease(){
this.counter++;
this.$emit("increase",this.counter)
},
act reduced () {
this.counter--;
this.$emit("reduce",this.counter)
}
}
});
new view ({
el:"#app",
data:{
counter:0
},
methods:{
handleGetTotal(total){
this.total = total
}
}
})
</script>
Personal understanding:
<My-component> component rendering of two button, click event triggers binding When you click on a button while the trigger function handleIncrease, counter ++ function to achieve internal operations and add value after the increase of the value of a name Chuan to the parent, @ increase, that is, the first click of a button when finished after executing handleIncrease transfer function value immediately execute the parent @ increase = "handleGetTotal", perform handleGetTotal function, with the function to receive incoming this.counter as total value, this.total = total passed to the parent total, last call is this p tag value.