#javascript #vue.js #vuejs2
Вопрос:
Экспериментируя сегодня с небольшим количеством причудливого синтаксиса в своих шаблонах, я столкнулся с запутанным поведением bind() функции в обработчиках событий Vue.
Игнорируя любые возможные неправильные методы и тот факт, что привязка здесь совершенно бессмысленна, пожалуйста, посмотрите на следующие 2 примера кода.
1.
lt;templategt; lt;button @click="(() =gt; console.log('this gets logged')).bind()"gt;lt;/buttongt; lt;/templategt; lt;scriptgt; export default { computed: { console: () =gt; console, }, } lt;/scriptgt; lt;templategt; lt;button @click="myFunc.bind()"gt;lt;/buttongt; lt;/templategt; lt;scriptgt; export default { methods: { myFunc () { console.log("this doesn't get logged") } } } lt;/scriptgt; Пример кода 1 правильно регистрирует вывод на консоль при нажатии кнопки, но по какой-то причине образец 2 ничего не регистрирует. Почему?
Ответ №1:
myFunc.bind() в примере 2 возвращает ссылку на новую функцию, но не вызывает ее.
Чтобы он работал так, как ожидалось, myFunc.bind()() требуется.
lt;templategt; lt;button @click="myFunc.bind()()"gt;lt;/buttongt; lt;/templategt; - выглядит усталым, но работает
Комментарии:
1. В примере 1 это тоже не называется.
2.
(() =gt; console.log('this gets logged')).bind()в примере 1 также возвращает ссылку на новую функцию и не вызывает ее, но она работает.3.
bind()не влияет на console.log. console. журнал работает безbind(). С помощью заключающей функции внешней скобки()вызывается внутренняя функция.4. Функция не вызывается, заключая ее в круглые скобки.