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 相关文章推荐
JavaScript asp.net 获取当前超链接中的文本
Apr 14 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
Jquery iframe内部出滚动条
Feb 11 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
Javascript Throttle &amp; Debounce应用介绍
Mar 19 Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 Javascript
原生js编写2048小游戏
Mar 17 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 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
PHP设计聊天室步步通
2006/10/09 PHP
php tp验证表单与自动填充函数代码
2012/02/22 PHP
浅析PHP绘图技术
2013/07/03 PHP
PHP eval函数使用介绍
2013/12/08 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
javascript脚本调试方法小结
2008/11/24 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
js单词形式的运算符
2014/05/06 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
Python实现感知器模型、两层神经网络
2017/12/19 Python
python MySQLdb使用教程详解
2018/03/20 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
容易被忽略的Python内置类型
2020/09/03 Python
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
this关键字的作用
2016/01/30 面试题
个人党性剖析材料
2014/02/03 职场文书
党建目标管理责任书
2014/07/25 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
政审证明材料
2015/06/19 职场文书