Question

问题是这个，我有一个小的jquery代码来处理带有下拉列表的菜单，起初我在用户登录时有一个登录组件 - 我从主组件的挂钩中调用该代码（在代码中有一个窗口onClick，我把一个console.log用来进行测试），一切正常，现在当用户注销然后另一个用户（或同一个用户）再次登录代码时再次调用（因为挂钩），当他/她点击某些东西时，我得到两个console.logs。如果页面重新加载，一切都很好，函数只调用一次，但只要用户登录，注销，登录等等，我就会得到多个console.logs。

加载此jquery代码的正确方法是什么（我知道jquery所做的一切，vue也这样做。）
如何在没有两次的情况下销毁/重新调用该代码。

我遇到的一个肮脏的解决方案是将代码加载到主.html文件中，然后在用户位于主页面时重新加载页面。

提前感谢。

更新：

嗨，感谢您的回复，我使用vue-router所以在loggin组件中不需要jquery代码，我需要它在仪表板组件中菜单存在，这就是为什么我在挂载钩子中加载代码，一段代码只是一个window.addEventListener（＆＃39;点击＆＃39;，......），这段代码显示了一个仅用于测试的console.log，所以当用户登录jquery时已加载，当用户注销然后登录已再次加载的jquery代码，因此当用户单击窗口时我将有2个console.logs，我将尝试您的解决方案。

FINAL：好吧，感谢大家，我最终做的是使用jquery的绑定函数$（window）.bind（＆＃39;点击＆＃39; .....）然后在beforeDestroy钩子里只需$ （窗口）.unbind（）和eveything很棒。

Answer 1

如果我正确理解您的问题，您需要在设置之前检查您的处理程序是否已存在。这样，如果它已经存在，你将不会再添加它。

在mounted()检查typeof window.onclick == 'object'是否有window.onclick = function() {}，那么您还没有设置它，您可以设置处理程序typeof window.onclick

如果已设置，则'function'将等于{{1}}

Answer 2

首先我建议不要与Vue一起使用jQuery！正如您已经说过的，Vue是一个可以在不需要jQuery帮助的情况下操作DOM的框架。

但无论如何，一种快速的“vue方式”解决方案是在登录组件上使用 beforeDestory 挂钩，并清除jQuery事件。

beforeDestroy() {
  // Clean the listeners.
}

P.S。下次，最好显示一些代码：）

组件内的Vue jquery

2 个答案: