功能描述:
通过点击按钮,可以增减购物数量
组件名称是 CouterBtn
最终效果如下
我们使用 vue-cli搭建基本的开发环境,这也是最快的进行 .vue组件开发的方式
对于入口组件 App.vue (可以暂时忽略其他细节,我们的重点是如何写组件)
App.vue
@H_502_35@
import CounterBtn from './components/CouterBtn.vue'
15. export default {
data() {
return {
btnValue: {}
}
20. },components: {
CounterBtn
}
}
25.
我们可以看到组件的实现非常简单,3个button搞定; 这里最关键的代码是
this.$emit('input',other: '++'})
通过 触发 input事件和自定的数据来实现把数据暴露给 v-model绑定的属性值
