如何将“委托”函数的参数传递给从孩子到父母的另一个函数？

Posted 2023-02-22

【中文标题】如何将“委托”函数的参数传递给从孩子到父母的另一个函数？

【英文标题】：How to pass params of a 'delegated' function to another function from child to parents?

【发布时间】：2020-04-14 03:06:01

【问题描述】：

我有一个问题。如何调用（委托）函数并为其添加一些参数，javascript中有没有vay？

我创建了一个小例子： https://jsfiddle.net/p7kL5mvw/

在孙子中，我有一个 OnEdit 函数。它应该调用它的父级 onEdit 函数，因此祖父级组件接收 a) 更改的值和 b) 来自中间 (TableView) 的 prop a 和 b。

我正在寻找一些东西，所以我可以在这行中说：

<click-to-edit v-model="todos[idx].text" :editable="true" :pOnEdit="onEdit"></click-to-edit>

调用我父母的 onEdit 函数，传递我孩子给出的值并添加我的参数，例如：

:pOnEdit="onEdit(() => childArgument, todos[idx].a, todos[idx].b)

有没有可能，或者你将如何解决这个问题？非常感谢您的帮助！

【问题讨论】：

VueJs 2.0 emit event from grand child to his grand parent component 的可能副本 .... 这个问题的答案展示了 许多 技术

【参考方案1】：

只需使用custom events

click-to-edit 组件内部

<input @input="$emit('update', $event.target.value)" />

家长：

<click-to-edit v-model="todos[idx].text" :editable="true" @update="$emit('update', $event, todos[idx].a, todos[idx].b)"></click-to-edit>

祖父母：

<Parent @update="onUpdate" />

methods: 
  onUpdate(childArgument, parentArgumentA, parentArgumentB) 
   // do whatever
  

【讨论】：

感谢您的这种方法，这肯定会帮助很多人。我实际上有一个类似的方法，但如果有解决方案，我仍然很感兴趣。我之前也遇到过类似的情况，我总是不得不寻找另一种方式，例如click-to-edit 可能是不可编辑的、导入的库或其他任何东西。我的意思是使用 apply/bind 之类的东西，您只需将函数附加到它的子函数

【参考方案2】：

其实我找到了解决办法。由于您可以在 VueJS 模板中使用 javascript，因此它只适用于：

:pOnEdit="onEdit.bind(this, todos[idx].a, todos[idx].b)"

然后祖父母有孙子和孩子的争论。如果有人有同样的问题，我希望它会有所帮助:)

【讨论】：

所以现在你已经改变了this 的含义……以前是祖父母，现在是父母。尝试在内部做一些有用的事情（不仅仅是记录），你就会看到。简直是个坏主意……

我不太明白你的意思，抱歉。我不只是将它们注销，我实际上是这样使用它的，它对我有用。在中期，我将 ...arguments 传递给祖父母，祖父母收到我期望的所有参数。我知道我用'this'滥用了上下文变量，但我实际上并不需要那个上下文，我只是想重写委托函数来应用额外的参数