组件内的Vue jquery答案

【问题标题】：Vue jquery within component组件内的Vue jquery
【发布时间】：2018-06-29 05:59:08
【问题描述】：

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

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

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

提前致谢。

更新：

您好，感谢您的回复，我使用 vue-router，所以在登录组件中不需要 jquery 代码，我在菜单所在的仪表板组件中需要它，这就是为什么我将代码加载到挂载的钩子中，一段代码只是一个window.addEventListener('click', ......)，这段代码显示了一个console.log，只是为了测试，所以当用户登录jquery时，它被加载了，当用户注销然后登录 jquery 代码，它再次加载，所以当用户单击窗口时我将有 2 个 console.logs，我会尝试你的解决方案。

最终：好吧，感谢大家，我最终做的是使用 jquery 的绑定函数 $(window).bind('click' .....) 然后在 beforeDestroy 挂钩中只需 $(window).unbind() 和eveything效果很好。

【问题讨论】：

您能分享您的登录代码吗？

标签： javascript jquery vue.js

【解决方案1】：

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

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

beforeDestroy() {
  // Clean the listeners.
}

附：下一次，最好显示一些代码:)

【讨论】：

【解决方案2】：

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

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

如果已设置，则 typeof window.onclick 将等于 'function'

【讨论】：