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

前言

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

Carts.vue表示购物车

Counter.vue表示计数器

父级组件

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

<template>
  <div>
    <carts></carts>
  </div>
</template>

<script>

import Carts from './components/Carts.vue';
export default {
  components:{Carts},
  data(){
    return{
      
    }
  }
};
</script>

购物车组件

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

<template>
  <div>
      <h1>购物车</h1>
      <ul>
          <li v-for="(v,i) of fruits" :key="i" >
              {{v.name}}
              单价：{{v.price}}
              <counter  :qu="v.qu" :index="i" @add="add" @sub="sub" ></counter>
          </li>
      </ul>
  </div>
</template>

<script>
import Counter from "./Counter.vue"
export default {
    components:{Counter},
    data() {
        return {
        fruits:[
        {name:"苹果",price:3.14,qu:0},
        {name:"鸭梨",price:2.14,qu:0},
        {name:"香蕉",price:3.20,qu:0},
      ]
        }
    },
    methods: {
        add(index){
            this.fruits[index].qu++
        },
        sub(index){
            if(this.fruits[index].qu>0){
                this.fruits[index].qu--
            }
            
        }
    },
}
</script>

计数器组件

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

<template>
    <span>
        <button @click="sub">-</button>
        <span>{{qu}}</span>
        <button @click="add">+</button>
    </span>
</template>

<script>

export default {
    props:["qu","index"],
    methods: {
        sub(){
            this.$emit("sub",this.index)
        },
        add(){
            this.$emit("add",this.index)
        }
    },
}
</script>

常见错误总结

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

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