功能描述:
通过点击按钮,可以增减购物数量
组件名称是 CouterBtn
最终效果如下
我们使用 vue-cli搭建基本的开发环境,这也是最快的进行 .vue组件开发的方式
对于入口组件 App.vue (可以暂时忽略其他细节,我们的重点是如何写组件)
App.vue
下面我来对 App.vue中的一些代码进行一些说明,根据代码行数来说明
4 : 我们使用 {{ btnValue }}来获取自定义组件 counter-btn的值,这里仅仅是展示效果用
5: 我们使用了counter-btn,自定义的组件
9: 我们将自定义组件的值,绑定到我们的表单组件 input中去,在真实的情况下,此 input的类型可能为 hidden类型
21: 由于我们需要在App.vue组件中使用我们自定义的组件 counter-btn,所以需要使用 components注册组件,这里还使用了 ES6的对象解构
26: 我们使用CSS预处理器为stylus,前提是你的 node_modules中要安装此npm包和loader,vue-cli已经帮我们处理好了stylus的编译; 根据个人情况选择
我们自己设计的组件通过 v-model,把组件内部的值传给了它所绑定的值
下面我们来看看我们的组件的实现
CounterBtn.vue
我们可以看到组件的实现非常简单,3个button搞定; 这里最关键的代码是
this.$emit('input',other: '++'})
通过 触发 input事件和自定的数据来实现把数据暴露给 v-model绑定的属性值
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。