自定义事件vue $emit子组件传出多个参数,如何在父组件中在接收所有参数的同时添加自定义参数

129 阅读1分钟

子组件传递单个参数,但父组件不需要传递自定义参数时

// 子组件
this.$emit('test',this.param)
// 父组件
@test='test'

// script
methods: {
  test (val) {
    console.log(val)
  }
},

子组件传递多个参数,但父组件不需要传递自定义参数时

// 子组件
this.$emit('test',1, 2, 3)
// 父组件
@test='test(arguments)'

// script
methods: {
  test (val) {
    console.log(val) // 一个[object Arguments]数组
  }
},

子组件传出单个参数时且父组件需要自定义参数时:

// 子组件
this.$emit('test',this.param)
// 父组件
@test='test($event,userDefined)'

// script
methods: {
  test (val, val2) {
    console.log(val) // 相应的值
    console.log(va2) // 相应的值
  }
},

子组件传出多个参数时且父组件需要自定义参数时

// 子组件
this.$emit('test',this.param1this.param2, this.param3)
// 父组件 arguments 是以数组的形式传入
@test='test(arguments,userDefined)'
// script
methods: {
  test (val, val2) {
    console.log(val) // 一个[object Arguments]数组
    console.log(va2) // 相应的值
  }
},

重要

  1. 里面需要写$event和arguments参数时,都必须写这两个值,具体可以看源码