vue 父子组件传值及自定义参数

• 父组件传值子组件 如下栗子 specialModuleList
父组件code

<ImageCard @changeImageItem="changeImageItem" :specialModuleList="formData.specialModuleList[index]"></ImageCard>

子组件code

  props: {
    specialModuleList: {
      type: Object,
      default: function(){
        return {}
      }
    },
  },

• 子组件传值父组件
  子组件传值code

changeItem(){
  this.$emit('changeImageItem',specialModuleList);
},

父组件接收code

changeImageItem(val){
  this.$set(this.formData,val)
},

重点~~ 有很多情况是自定义参数

• vue子组件$emit传出参数后，父组件如何接受参数的同时添加自定义参数
  子组件传参方法不变，以上面changeItem为栗子

区别 在于父组件接收 [index]为自定义索引参数

<ImageCard @changeImageItem="changeImageItem($event,index)" :specialModuleList="formData.specialModuleList[index]"></ImageCard>

changeImageItem(val,index){
  this.$set(this.formData.specialModuleList,[index],val)
},

如果子组件参数需要传多个
子组件code

changeItem(){
  this.$emit('changeImageItem',specialModuleList,this.imageForm, this.type);
},

父组件使用 arguments 接收

<ImageCard @changeImageItem="changeImageItem(arguments,index)" :specialModuleList="formData.specialModuleList[index]"></ImageCard>