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

Question

问题

在 VueJS 中将函数绑定到组件时，我试图传入自定义参数，并且接受该组件提供的参数到相同的功能。

上下文

我正在向 Bootstrap-Vue table 添加自定义排序函数。

调用此函数时，table 组件将 7 parameters 传递给它。

我的复杂之处在于，为了对某个列进行排序，我需要来自外部作用域的信息，因此我想动态地将所需信息直接传递到 v-bind [=56 中的排序函数中=].这很好，除了我不知道如何传递我的自定义参数以及接受 [=] 时提供的 7 个参数52=]-Vue 在内部调用我的函数。

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

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

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

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

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

我只有有一个参数代替，其他7个都丢了

尝试传入 ...arguments，但这也不符合我的要求。

问题

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

Answer 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"
    }
  }
}

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

Adding custom parameter(s) to function call bound to component in VueJS

javascript

bind

vue.js

vuejs2

问题

上下文

问题