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

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

// 子组件 my-button
<button @click="$emit('click', 'hello')">按钮</button>

// 父组件
<my-button @click="clickHandle"><my-button>

methods: {
    clickHandle(str) {
        console.log(str)
    }
}
复制代码

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

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

// 子组件 my-button
<button @click="$emit('click', 'hello')">按钮</button>

// 父组件
<my-button @click="clickHandle(str, '我是父组件内的数据')"><my-button>

methods: {
    clickHandle(str, parentStr) {
        console.log(str)
        console.log(parentStr)
    }
}
复制代码

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

正确的传参方式

// 子组件 my-button
<button @click="$emit('click', 'hello')">按钮</button>

// 父组件
<my-button @click="clickHandle(arguments, '我是父组件内的数据')"><my-button>

methods: {
    clickHandle(arguments, parentStr) {
        console.log(arguments[0])
        console.log(parentStr)
    }
}
复制代码

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