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

一、
在使用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页面就是如上所述的那种写法。

箭头函数文档

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

[js] js循环中调用异步的方法，如何确保执行结果的顺序是正确的？
[js] js循环中调用异步的方法,如何确保执行结果的顺序是正确的? An example:let searchApi = function(arg){return new Promise((reso ...
php编写用户登录页面,js+php实现静态页面实时调用用户登陆状态的方法
这篇文章主要介绍了js+php实现静态页面实时调用用户登陆状态的方法,采用在静态页面中使用js调用php页面从而实现用户登录状态的实时调用功能,需要的朋友可以参考下本文实例讲述了js+php实现静态 ...
js请求返回一个页面html页面跳转页面,JS cookie操作解决页面跳转返回
在HTML中,页面跳转后,js和HTML都会刷新,这样数据就会初始化,如果要解决页面跳转互传数据,可以考虑cookie. 对于页面跳转,然后页面返回等一系列操作,cookie中数据模拟堆栈出栈可以实现 ...
Vue+wow.js+animate.css-实现页面滚动可视区域动画效果展示-案例
说明 wowjs-当页面向下滚动时,动画出现:当页面向上回滚时,动画不会回退. 安装 npm install wowjs --save-dev npm install animate.css --sa ...
html简单父子页面,js 的 iframe 父子页面通信的简单方法
1.获取子页面的 window 对象在父页面中,存在如下两个对象 window.frames document.iframeElement.contentWindow 可以获取到子页面 win ...
打开页面js自动加载的方法
一.js方法: 1.在body标签加onload属性: 例:<body οnlοad="myfunction()"> 2.window.onload方法例: < ...
HTML页面JS事件生成本页面URL二维码，可以手机扫描
很简单,直接贴代码: <!DOCTYPE html> <html><head><meta charset="UTF-8"><t ...
js向jsf调用后台方法并传递参数
使用p:remoteCommand来达到复杂的异步刷新取值大家请注意,这个方法可以真正的解决在jsf中通过js调用后台bean方法并获取bean方法返回值的问题. 同样,首先我们要写两个jsf组件, ...
整理前端css/js/jq常见问题及解决方法（3）
jq: 1.prepend(参数);//将参数内容前置再某元素内部; eg: <div id="div1">奇妙能力歌</div> $("#div ...

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

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

最新文章

热门文章