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>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。