关于Vue页面JS+JQ无法调用页面方法与data

最新推荐文章于 2024-01-31 17:04:22 发布

weixin_34377065

最新推荐文章于 2024-01-31 17:04:22 发布

阅读量615

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 后端 ViewUI

原文链接：https://segmentfault.com/a/1190000015214124

本文探讨了在Vue项目中如何正确集成第三方JS库的方法，特别是解决jQuery-contextmenu等插件无法访问Vue实例的问题。文章介绍了如何利用箭头函数来确保正确的this上下文，并给出了具体的实现步骤。

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

一、
在使用vue开发的过程中难免要整合第三方js或者jq。
但是整合后的js与jq无法使用vue页面里面的方法与data。
时常发生明明在同一个vue页面里面却无法调用到方法属性。
其实这是你的调用方式不对。
我遇到过的就是jquery-contextmenu的右击事件问题
这是我们要付给右击事件的操作，selector是id，items是右击事件触发的方法在下面（这里的callback回调函数，方法.call（本身的this,参数S）的意思是：在这个方法里调用其他对象的方法，以其他对象替代本身对象）
图片描述
二、
这是触发事件的定义在data里面定义箭头函数，然后传给上图的方法里

然后我们来看一下效果,当我点击添加节点可以运行但是单击添加子节点报错了。这是因为函数创建了自己的this，所以无法获取到我们想要的。而箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。所以能访问到我们所定义的属性值。
图片描述
三、
触发方法调用不能使用function(){}
需要使用()=>{}的方式，这个ES6特有的写法。es6 箭头函数不会有新的作用域
如果你是在第三方js中要调用vue页面的data、methods的话必须先以参数的形式转过去，然后在根据参数调用。然后vue页面就是如上所述的那种写法。

箭头函数文档