Vue 父子组件自定义事件传参

4,231 阅读1分钟

在子组件中通过 $emit 向父组件传值,父组件除了接收传过来的值,还需要添加额外的自定义参数时

demo地址:github.com/zengkun/vue…

1、子组件传出单个参数时:

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

2、子组件传出多个参数时:

// 子组件
this.$emit('test', param1, param2, …)
// 父组件 arguments 是以数组的形式传入
@test='test(arguments, otherParams…)'

3、箭头函数转化(子组件传出单个、多个都适用)

  • 3.1、子组件传出单个参数
// 子组件
this.$emit('test', param)
// 父组件
@test='(param) => {test(param, otherParams…)}'
  • 3.2、子组件传出多个参数
// 子组件
this.$emit('test', param1, param2, …)
// 父组件
@test='(param1, param2, …) => {test(param1, param2, …, otherParams…)}'