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

前端之家收集整理的这篇文章主要介绍了利用Vue v-model实现一个自定义的表单组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

功能描述:

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

组件名称是 CouterBtn

最终效果如下

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

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

App.vue

这是一个利用 v-model实现的自定义的表单组件
CouterBtn组件的值 {{ btnValue }}
5.

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

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

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

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

原文链接:https://www.f2er.com/vue/39670.html

猜你在找的Vue相关文章