vue.js父组件使用外部对象的方法示例


Posted in Javascript onApril 25, 2017

最近在碰到有同学问我,vue父组件怎么使用外部对象,具体例子如下:

有组件a:

<div @click="onClick">component a</div>
// componet a
...
methods: {
 onClick(evt) {
  // doSomething 这里只能拿到 mouseEvent
  this.outsideClickHandler(evt); // 调用外部处理函数
 }
}
...

有组件B,引用组件a,并传入outsideClickHandler方法:

<v-componetA :outside-click-handler="onClick">componentB</v-componetA>

对以上这种封装是组件库中再常见不过的封装了,实际使用中,有时候会需在component B传入component A的outsideClickHandler方法中使用component B中的数据对象,而component的代码又不能更改,这时候怎么办呢?

其实解决方案也是非常简单,但是有时候我们会"执迷不悟"。

废话不说,上代码!

// componet b
...
data() {
 a: {} // 数据
},
methods: {
 onClick(evt) {
  // 关键在于返回一个函数哦
  return (evt) => {
   // 这里也可以直接闭包使用
   console.log(this.a);
  }
 }
}
...

总之,对于vue函数来说,当无法直接传入参数的时候,可以考虑闭包实现,本文所说的也只是一个简单例子,js的函数作为一等公民还有很多有趣的应用。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery 新浪网易的评论块制作
Jul 01 Javascript
js中的string.format函数代码
Aug 11 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
使用vue构建一个上传图片表单
Jul 04 Javascript
vue中的scope使用详解
Oct 29 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
vue基础之data存储数据及v-for循环用法示例
Mar 08 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 #Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 #Javascript
整理一些最近经常遇到的前端面试题
Apr 25 #Javascript
Vue.js 2.0学习教程之从基础到组件详解
Apr 24 #Javascript
js实现延迟加载的几种方法
Apr 24 #Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 #Javascript
浅析Angular2子模块以及异步加载
Apr 24 #Javascript
You might like
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
js DataSet数据源处理代码
2010/03/29 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
2016/07/04 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
Python 登录网站详解及实例
2017/04/11 Python
Python生成随机密码的方法
2017/06/16 Python
Django实战之用户认证(用户登录与注销)
2018/07/16 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
python实现单链表的方法示例
2019/09/03 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
使用pymysql查询数据库,把结果保存为列表并获取指定元素下标实例
2020/05/15 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
高中生毕业自我鉴定范文
2013/12/22 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
文秘个人求职信范文
2014/04/22 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
校园开放日新闻稿
2015/07/17 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
大学学生会竞选稿
2015/11/19 职场文书