< body >
<div id="app">
:{{total}}
<my-component v-model="total">
</my-component>
<button @click="handleGetTotal"></button>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
Vue.component("my-component",{
prors:["value"],
template:"<input :value="value" @input="handleIncrease"/>",
methods:{
handleIncrease:function(event){
this.$emit("input",event.target.value);
},
}
});
var app=new Vue({
el:"-sharpapp",
data:{
total:0
},
methods:{
handleGetTotal:function(){
this.total--;
}
}
})
</script>
Intermediate template:" < input: value= "value" @ input= "handleIncrease" / >", what does this sentence mean? how did this value come from? the browser reported an error saying that value is not defined
.