个人总结

Vue的element中可以写两个事件

<div>
<el-button type="primary"  @click="btn();add()">主要按钮</el-button>
<div>
export default {
  methods:{
     btn(){
      let count=this.list.length
      this.list.push({id:count++,name:this.input,price:30})
      this.input=""
    },
    add(){
      console.log(222);
    },
  },
}

Data与computed中不能有相同的否则会报错

获得总价的两种方式

引入子组件 子组件首字母需要大写，或者运用驼峰命名法 即 子父传值

//这是驼峰命名法
//运用驼峰命名法时凡是除首字母外是大写的字母时，在引入时大写字母都小写，然后除首字母外的大写字母前都加-
<fruit-cart :list="this.list" @handleDelete="handleDelete"/>
import FruitCart from "./FruitCart.vue"
export default {
  components: {
    FruitCart
  }
}
//这是普通获取子组件的方法
<Cart :list="this.list" @handleDelete="handleDelete"/>
import Cart from "./FruitCart.vue"
export default {
  components: {
    Cart
  }
}

1.父传子

<div>
 <fruit-cart :list="this.list"/>
<div>

this.list为自己在data(){return{}}中定义的数据 子组件接受数据

export default {
    props:{
        list:{
            type:Array,
            default:[]
        }
    },
  methods:{
  },
   data() {
    return {

    }
  },
}

子组件不能在本组件内删除父组件中的数据

export default {
    props:{
        list:{
            type:Array,
            default:[]
        }
    },
  methods:{
  },
   data() {
    return {
     
    }
  },
}

因此，需要子组件

<template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
 </template>
 export default {
    props:{
        list:{
            type:Array,
            default:[]
        }
    },
  methods:{
    handleDelete(index,row){
    // this.list.splice(index,1)
    //用$emit向父组件传值，第一个参数自己随便定义，第二个参数为自己要传递的参数
    this.$emit("handleDelete",index)
    }
  },
   data() {
    return {
     
    }
  },
}

为此需要父组件接受数据

//@后的名字要与子组件传值时取得名字相同
//而本事件的名字则与子组件一样随意取一个名字但要与我们在methods中的事件名相同
<fruit-cart :list="this.list" @handleDelete="handleDelete"/>
//即
export default {
  methods:{
  这个事件的名字与上面所说名字相同
    handleDelete(index,row){
      this.list.splice(index,1)
    }
  },
   data() {
    return {
      input: '',
      stylelist:{
        width:"300px"
      },
      list:[
        {
          id:0,
         price:"20",
         name:"苹果"
        },
        {
          id:1,
         price:"20",
         name:"香蕉"
        },{
          id:2,
         price:"20",
         name:"猕猴桃"
        },
      ],
    }
  },
   computed:{
    totalcount(){
      let mnuber=0
      this.list.forEach((v,i)=>{
        mnuber+=Number(v.price)
      })
      return mnuber
    }
  },
  components: {
    FruitCart
  }
}