利用Vue v-model实现一个自定义的表单组件

功能描述:

通过点击按钮,可以增减购物数量

组件名称是 CouterBtn

最终效果如下

我们使用 vue-cli搭建基本的开发环境,这也是最快的进行 .vue组件开发的方式

对于入口组件 App.vue (可以暂时忽略其他细节,我们的重点是如何写组件)

App.vue

我们可以看到组件的实现非常简单,3个button搞定; 这里最关键的代码是

this.$emit('input',other: '++'})

通过 触发 input事件和自定的数据来实现把数据暴露给 v-model绑定的属性值

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程之家

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!