学习笔记-组件传值的数据累加器| 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第1天
前言
组件传值的数据累加器可以分为三个部分
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均为绑定事件应该用(@)而不是(:)来绑定
