1 确定父组件和子组件，例如父组件CartsList,子组件CounterList

2 在父组件中引入子组件

2.1 1 引入组件

import CounterList from "./CounterList" export default{

2.2 2 注册组件

components:{ CounterList : CounterList },

2.3

<!-- 父亲拿子级给他的数据也需要绑定事件，将子级给的数据作为绑定事件的参数 -->
  <CounterList v-bind:cartData="v.qu" v-bind:index="i" v-on:add="add" v-on:sub="sub"></CounterList>
  

3 父亲拿子级给他的数据也需要绑定事件，将子级给的数据作为绑定事件的参数，在父组件里面显示的子组件里面绑定事件

4 父组件绑定事件后需要在methods中写绑定事件的方法

export default{ methods:{ // 拿到子级给的index好判断需要修改哪个元素的qu值 add(index){ this.fruits[index].qu++ }, sub(index){ if(this.fruits[index].qu>0){ this.fruits[index].qu-- } } }

5 子组件也需要绑定事件，子组件在增加和减少两个按钮上面都绑定事件

- +

6 子组件写完绑定事件后需要在methods中写绑定事件的方法，在方法中触发父组件的方法（调用），并将子组件传递的值放进去

export default { // 子级拿到父级给的qu和index props:["cartData","index"], methods:{ sub(){ // 使用$emit来触发父级的sub事件，第一个参数为触发父级事件的名称，第二个参数为子级给父级传递的数据 this.$emit("sub",this.index) console.log(this) }, add(){ this.$emit("add",this.index) } } }

7 父组件拿子组件的值不是也绑定事件和写事件的方法了吗，在此方法中将子组件给的值作为方法的参数，从而对需要的东西进行处理。