Vue与jQuery混用的数据共享（不使用Vue-cli）_jquery怎么和vue传数据-优快云博客

本文介绍了在不使用Vue-cli的情况下，如何在Vue和jQuery混用的环境中实现数据共享。通过设置window全局变量，使得jQuery能够与Vue框架之间进行数据交互。示例包括JS代码、分析以及Vue方法调用的实现，展示了Vue组件如何响应jQuery操作的全局变量变化。同时，文章提及尝试使用jQuery事件响应Vue视图更新，但未成功，并提供了相关参考资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue与jQuery混用的数据共享（不使用Vue-cli）

* 前言：本示例没有使用webpack，配置环境是参考廖雪峰廖大的node.js教程搭建。 *

* 环境：Node.js + Koa2 + nunjunks + Vue + jQuery 配置详情和教程可参考下面的链接 *
廖大教程链接

* 示例：一个在页面上使用基于jQuery的bootstrap-datetimepicker日期控件的实例 *

要点一：Vue与jQuery混用时的数值共享 - 利用 window

下面这个例子中包含一个页面初始化的函数，包含以下逻辑：

在window.onload()中使用ajax从数据库读取树的值；在读取成功的回调过程中：

- 将数据重构并赋值给自定义Vue组件，一个Tree树；
- 将与DatePicker有关的jQuery方法添加到window.onload()方法中，以便使jQuery能在window的全局调用下工作。

这个逻辑，实际上就是让jQuery和Vue在Window对象下实现了平行工作。并且可以通过操作window的全局变量实现数据共享。

JS代码

window.onload = function() {
   
   
    var treeDataList = []
    $.getJSON('/api/divisions').done(function(data) {
   
   
        var divList = []
        divList = sortDivList(data.divList)
        console.log(JSON.stringify(divList))
        // 将获取的divs转换成树的结构 取得去重的WZ名
        uniqWZ = []
        bigBSNList = []
        for (var i in divList) {
            uniqWZ.push(divList[i].warZone)
        }
        uniqWZ = new