在同一个UI中使用jQuery和Vue.js不是一个好的选择。如果你可以避免它，请尽量避免。你为了折腾自己，请把我上一句忽略。

你可能读到这篇文章不是因为你想要用jQuery和Vue，而是你必须这么做。也许客户坚持使用一个特定的jQuery插件，那么你将没有时间为Vue重写。

在本文中，我将演示如何将jQuery UI Datepicker插件添加到Vue项目。



与jQuery和Vue一起使用的问题

jQuery和Vue一起使用有哪些潜在的危险？

Vue是一个嫉妒的库，你必须让它完全拥有你给它的DOM补丁（由你传递给el的定义）。如果jQuery对Vue正在管理的元素进行更改，比如添加一个类到某个类中，Vue将不会意识到这个变化，并且会在下一个更新周期中覆盖它。

解决方案：使用一个组件作为包装

知道Vue和jQuery永远不会共享DOM的一部分，我们必须告诉Vue封锁一个区域并将其交给jQuery。

使用一个组件来包装一个jQuery插件似乎是要走的路，因为：

1. 我们可以利用生命周期钩子来设置和拆卸jQuery代码

2. 我们可以使用组件接口通过道具和事件与Vue应用程序的其余部分进行通信

3. 组件可以选择退出v-once更新

设置jQuery UI Datepicker

显然你需要在你的项目中首先包含jQuery和jQuery UI库。一旦你有了这些，datepicker只需要一个输入元素自己附加到：

然后可以通过选择它并调用方法来实例化它：

Datepicker组件

为了使我们的datepicker组件，模板将是这个输入元素：

注意：这个组件应该只是插件的一个包装。不要把你的运气，给它的任何数据属性或使用指令或slots。

实例化小部件

而不是给我们的输入一个ID并选择它，我们可以使用这个(this.el在组件被挂载之前是未定义的。

拆除

要拆除日期选择器，我们可以按照类似的方法并使用生命周期钩子。请注意，我们必须使用beforeDestroy来确保我们的输入仍然在DOM中，因此可以被选中（它在destroy钩子中是未定义的）。

通过props配置

为了使我们的组件可重用，最好允许自定义配置，比如用配置属性dateFormat指定日期格式。我们可以用props做到这一点：

让jQuery处理更新

让我们说，而不是作为一个字符串传递你的dateFormat的props中，你把它作为你的根实例的数据属性，即：

这将意味着dateFormat将是一个被动数据属性。您可以在应用程序生命周期的某个时刻更新其值：

由于dateFormat prop是datepicker组件挂载挂钩的依赖关系，因此更新它将触发组件重新呈现。这不会很酷。 jQuery已经在输入上设置了你的datepicker，现在正在用它自己的自定义类和事件监听器来管理它。组件的更新将导致输入被替换，因此jQuery的设置将被立即重置。

我们需要这样做，以便反应数据不能触发此组件中的更新…

v-once

v-once指令用于在组件有很多静态内容的情况下缓存组件。这实际上使组件选择退出更新。

这实际上是完美的使用我们的插件组件，因为它将有效地使Vue忽略它。这给了我们一些信心，jQuery将在应用程序的生命周期中对这个元素进行无阻的控制。

将数据从jQuery传递给Vue

如果我们无法检索选择的日期并在应用程序的其他地方使用它，那么使用日期选择器是没有用的。让我们这样做，在一个值被选中后，它被打印到页面。

我们将首先给我们的根实例一个日期属性：

日期选择器窗口小部件有一个onSelect回调，当选择一个日期时被调用。然后，我们可以使用我们的组件通过自定义事件发出这个日期：

我们的根实例可以侦听自定义事件并接收新的日期：

最好要感谢一下Stack Overflow的社区。