<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>自定义表单输入组件</title>
</head>
<body>
<div id="app">
<p>总数：{{total}}</p>
<my-component v-model="total"></my-component>
<button @click="handleReduce">-1</button>
</div>
<script>
Vue.component('my-component',{
props: ['value'],
template: '<input :value="value" @input="updateValue">',
methods: {
updateValue: function (event) {
this.$emit('input', event.target.value);
}
}
});
var app = new Vue({
el: '#app',
data: {
total: 0
},
methods: {
handleReduce: function () {
this.total--;
}
}
});
</script>
</body>
</html>
注意：实现这样一个具有双向绑定的v-model组件要满足下面的两个要求：
接受一个value属性
在有新的value时触发input事件
更多教程点击《Vue.js前端组件学习教程》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
