Vue子传父，父组件事件处理函数中arguments的使用

在vue开发中子组件与父组件通信&＃xff0c;父组件常使用事件处理函数的方式来获取子组件参数

// 子组件 my-button
按钮// 父组件
methods: {clickHandle(str) {console.log(str)}
}


当子组件内部按钮点击时&＃xff0c;对外派发一个click事件&＃xff0c;父组件监听这个click事件&＃xff0c;并绑定对应的事件处理函数&＃xff0c;就能获取到子组件内部抛出的数据

实际开发中&＃xff0c;有时我们希望能在事件处理函数中传入父组件内部的数据

// 子组件 my-button
按钮// 父组件
methods: {clickHandle(str, parentStr) {console.log(str)console.log(parentStr)}
}


但是以上方法并不可取&＃xff0c;父组件在事件处理函数中传入的参数会覆盖掉子组件抛出的数据&＃xff0c;若父组件内str未定义还会抛出异常。

正确的传参方式

// 子组件 my-button
按钮// 父组件
methods: {clickHandle(arguments, parentStr) {console.log(arguments[0])console.log(parentStr)}
}


vue提供了一种方案&＃xff0c;在事件处理函数中设置第一个参数为arguments&＃xff0c;它会接收子组件内抛出的所有数据&＃xff0c;子组件抛出的数据都会存储在arguments中&＃xff0c;后面的参数可任意传入父组件内部的数据