首先,我不确定这是一个 Vue 的问题还是一个与 JavaScript 相关的问题。我写了一些最终有效的代码,但我不知道为什么。也许你能给我启发。
我创建了一个“对话框窗口”组件。它是一个简单的(模态)对话框,它以函数为参数。如果用户单击“确定”,则会调用该函数 - 例如“您真的要删除该文件吗?” 取消或确定。
我传递给组件的函数有时本身就有一个参数。所以我想将已经参数化的函数作为参数传递给我的组件。我通过将函数包装在一个箭头函数中来实现这一点,该函数返回参数化函数,然后可以调用该函数。
这个概念在纯 JS 中的想法是这样的:
//the function to be finally executed
function say(message) {
document.getElementById("output").innerHTML = message;
}
//the parameterized function inside of an arrow function (as a variable)
const sayhelloworld = () => say("hello world");
//finally I call the arrow function which
//returns the parameterized function and calls this one as well
function start() {
sayhelloworld()(); //this is the core of my question: the double brackets!
}
所以我需要双括号。第一个 () 返回内部的函数,第二个 () 调用它。它确实像这样工作:https : //codepen.io/keztur/pen/powaLJN
现在让我们转向 vue:
我用事件总线打开我的对话框组件(对此很抱歉)并传递一个包含函数参数的参数对象。(我使用 Vue 3 - 所以在我的 EventBus 对象后面实际上是 'mitt' 库:https : //github.com/developit/mitt)
//component calling the dialog and passing the function parameter
//(as a part of a parameter object)
EventBus.emit("OpenDialog", {
header: "Delete file",
body: "Do you really want to delete that file?",
function: () => this.Delete(file_id)
});
模态组件:
data() {
return {
show: false,
ModalProps: {
header: "",
body: "",
function: ""
}
};
},
//inside of the modal component this function is called
//if the user clicks any of the two buttons (cancel or OK)
methods: {
clicked(button) {
if (button === 'ok' && typeof this.ModalProps.function === 'function') {
this.ModalProps.function(); //why does this work ...
//this.ModalProps.function()(); //...but not this?
//the second line does call the function but also throws an error afterwards
}
this.show = false; //modal is closed
}
},
... etc.
所以一开始我在上面的JS示例中使用了双括号。并且该函数被正确调用,但第二个“执行” backets 显然抛出了一个错误:
[Vue warn]: Unhandled error during execution of native event handler
at <Modal>
at <App>
但是由于我删除了第二个括号,所以一切正常。
所以我的问题是:为什么在 Vue 中,我的箭头函数中的函数会立即被调用,而不仅仅是通过引用返回?
你的第一个例子不起作用。它应该只是sayhelloworld();
. 运行时打开(浏览器或代码笔)控制台。它会说:
TypeError: sayhelloworld() is not a function
看起来它只是在工作,因为在错误之后没有更多的事情要做。例如,尝试添加alert("Done")
after sayhelloworld()();
,您会注意到警报从未显示。
Vue 的不同之处在于 Vue 捕获并显示错误。
sayhelloworld
(this.ModalProps.function
在您的 Vue 示例中)只是普通的(引用)函数,它们不返回任何内容。之间没有(*)区别
const sayhelloworld = () => say("hello world");
和
const sayhelloworld = function() {
say("hello world");
}
和
function sayhelloworld() {
say("hello world");
}
()()
如果函数返回函数本身,您将使用,例如:
function sayhelloworld() {
const innerFunction = function () {
say("hello world");
}
return innerFunction;
}
或者
function sayhelloworld() {
return () => say("hello world");
}
甚至
const sayhelloworld = () => () => say("hello world");
这些例子再次做同样的事情(*)。
(*) 它们并不完全相同,主要是关于提升和this
函数内部的处理方式,但这与此处无关。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句