Unhandled error during execution of native event handler vue

Прежде всего, я не уверен, связано ли это с 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' amp;amp; 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 выше. И функция была вызвана правильно, но при повторном «выполнении», очевидно, возникла ошибка:

 [Vue warn]: Unhandled error during execution of native event handler 
  at <Modal> 
  at <App>
 

Но с тех пор, как я удалил вторую скобку, все работает просто отлично.

Итак, мой вопрос: почему в Vue функция внутри моей функции со стрелкой вызывается сразу, а не просто возвращается по ссылке?

Ваш первый пример не работает. Так и должно быть sayhelloworld(); . Откройте консоль (браузер или кодовое имя) при ее запуске. В нем будет сказано:

 TypeError: sayhelloworld() is not a function 
 

Это только выглядит так, как будто это работает, потому что после ошибки больше нечего делать. Попробуйте добавить, например, alert("Done") после 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 внутри функции, но здесь это не имеет значения.