将自定义参数添加到绑定到 VueJS 中组件的函数调用答案

【问题标题】：Adding custom parameter(s) to function call bound to component in VueJS将自定义参数添加到绑定到 VueJS 中组件的函数调用
【发布时间】：2021-01-03 19:43:47
【问题描述】：

问题

在将函数绑定到 VueJS 中的组件时，我尝试传入自定义参数，并且接受该组件提供的参数给同一个函数。

上下文

我正在向 Bootstrap-Vue 表添加自定义排序功能。

在调用该函数时，表格组件会将7 parameters传入其中。

我的复杂之处在于，为了对某个列进行排序，我需要来自外部范围的信息，因此我想直接在 v-bind 属性中将所需信息动态传递给排序函数。这很好，除了我不知道如何都传入我的自定义参数以及接受 Bootstrap-Vue 在内部调用我的函数时提供的 7 个参数。

例如。我可以这样称呼它：

<b-table :sort-compare="sortTable" />

并且可以访问sortTable()中的所有7个参数。

但是如果我将自己的添加到列表中：

<b-table :sort-compare="sortTable(myData)" />

我只有有我的一个参数，其他 7 个都丢失了。

尝试传入...arguments，但这也不是我想要的。

问题

这可能吗？是否有一个特殊的 Vue 实例 $[property] 用作绑定函数调用中的占位符，例如用于事件侦听器的 $event，我错过了？

【问题讨论】：

标签： javascript vue.js vuejs2 bind

【解决方案1】：

这里最简单的选择是创建一个新函数。

你可以像这样使用内联箭头函数

<b-table :sort-compare="(...args) => sortTable(myData, ...args)" />

methods: {
  sortTable(data, a, b, key, desc, formatter, options, locale) {
    // do what you gotta do
  }
}

当然，这可能会变得非常混乱，因此您可以使用方法来创建函数

<b-table :sort-compare="createSortCompare(myData)" />

methods: {
  createSortCompare(data) {
    return (a, b, key, desc, formatter, options, locale) => {
      // you now have access to all arguments as well as "data"
    }
  }
}

【讨论】：