资讯专栏INFORMATION COLUMN

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

Elle / 1107人阅读

摘要:一在使用开发的过程中难免要整合第三方或者。但是整合后的与无法使用页面里面的方法与。时常发生明明在同一个页面里面却无法调用到方法属性。这是因为函数创建了自己的,所以无法获取到我们想要的。三触发方法调用不能使用需要使用的方式,这个特有的写法。

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

箭头函数文档

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108033.html

相关文章

  • 可视化拖拽 UI 布局之拖拽篇

    前言:前段时间负责公司的运营管理后台项目,通过运营后台的PC端拖拽配置布局,达到App首页模板的动态UI界面配置,生成页面。趁着周末,整理一下当时所了解到的拖拽。文章会根据大家的反馈或者自己学习经验的累积成长不定期更新丰富。如果你想了解更多PC端的拖拽开发,欢迎点赞关注或者收藏一波[鞠躬]。 之前在掘金一篇文章里看到这段话: UI 开发的三种模式 1.手写标签和样式代码,生成页面 2.可视化拖拽 ...

    ACb0y 评论0 收藏0
  • Vue作为组件在前端项目中的应用&Vue.set 的用法

    摘要:业务背景是,在的前端项目中加入作为组件。但随着需要登录的页面的增多,多个页面都需要添加相同的,,以及前端登录逻辑,所以在原先的项目中添加了,将重复的添加的代码加入到了文件中,然后通过方法将对象挂载到某个的节点上。 业务背景是,在jq的前端项目中加入Vue作为组件。 原本的登录功能是每个页面加一个登录弹窗(手机号+验证码验证登录),然后发ajax请求到后端,登录成功后再进行一些操作。 但...

    hersion 评论0 收藏0
  • vue-cli + webpack 多页面实例配置优化方法

    摘要:在谷歌找多页面,实例还是比较少,功夫不负有心人,在那找到了,具体可以到这个,非常感谢童鞋,今天要讲的内容是基于童鞋的多页面实例上再优化的。有需要一起交流的可以加我的微信,,记得备注技术交流哈。 vue+webpack是否有多页面 目前使用vue来做项目,估计大部分都是单页面(SPA)应用,一个轻型的 MVVM 框架,谁用了MVVM框架,就再也回不去JQ时代了,哈哈。 在手机端的项目,使...

    Taste 评论0 收藏0
  • 在没有DOM操作的日子里,我是怎么熬过来的(上)

    摘要:至于我为何要这么做,请听闰土娓娓道来。那么接下来,正文从这开始熟悉闰土的朋友都知道,我是从时代过来的前端,在刚接触和这类框架的时候,完全可以用一脸懵逼来形容我,最为贴切。作者闰土少年出处本博客的文章如无特殊说明,均为原创,转载请注明出处。 showImg(https://segmentfault.com/img/bVZjKW?w=670&h=442); 前言 在我动笔写这篇文章的时候,...

    shuibo 评论0 收藏0
  • 另辟蹊径:vue页面,多路由,前进刷新,后退不刷新

    摘要:如何添加这个条件,判断用户是否刷新了页面呢我们知道,当使用后,只有第一次进入后会触发钩子函数,再次进入就不再执行了。 目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验。注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据。不刷新特指当进入此页面时,不触发ajax请求,而是使用之前缓存的数据,以便减少服务器请求...

    Ocean 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<