极客观点
项目管理
HarmonyOS
<body>
<div id="app">
<p>总数：{{total}}</p>
<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:'#app',
data:{
total:0
},
methods:{
handleGetTotal:function(){
this.total--;
}
}
})
</script>
中间template:'<input :value="value" @input="handleIncrease"/>',这句话什么意思，这个value怎么来的，浏览器报错也说value未定义
<input :value="value" @input="handleIncrease"/>:value 意思是 把props里的value绑定 其实跟我们平时的
<input v-model="value" @input="handleIncrease"/>一样至于
@input="handleIncrease"是当input的值发生改变时，handleIncrease里的this.$emit('input')是改变props的值，使得有双向绑定的效果