【Vue】学习笔记-组件传值的数据累加器

前言

组件传值的数据累加器可以分为三个部分
App.vue为父级组件

Carts.vue表示购物车

Counter.vue表示计数器

父级组件

实现页面的组件传值主要思路为：父组件引入可视化的购物车组件(Carts.vue)，而购物车组件数量的变化又依赖于计数器组件的值。因此，在编写累加器(Counter.vue)时，应该父组件（App.vue）中导入购物车组件然后购物车组件在编写的时候导入累加器(Counter.vue)组件。因此父组件引入购物车组件的代码如下：

购物车组件

购物车组件以无序列表(ul)和列表元素(li)构成，在显示列表时运用 v-for绑定fruits集合中的各个元素。因为购物车组件在使用时需要累加器组件的配合，因此需要导入(Counter.vue)引入数量的加法和减法。购物车的代码如下

计数器组件

累加器组件获取购物车组件的qu水果数量和index水果的索引，当点击sub的减法按钮和add的加法按钮时，触发sub()和add()方法通过$emit中（传送的事件，传送的数据）将信息传送给购物车组件，购物车组件通过调用sub，add和index来改变每一次按钮点击以后组件显示的值
累加器的代码如下：

常见错误总结

当点击按钮时，按钮中间的数值没有发生变化，检查语法但是没有报错

主要原因：v-bind(:)用来绑定事件，而v-on(@)用来绑定事件，add和sub均为绑定事件应该用(@)而不是(:)来绑定