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 :nth-child前有无空格的区别分析
Jul 11 Javascript
JS OffsetParent属性深入解析
Jan 13 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
Aug 16 Javascript
详解node HTTP请求客户端 - Request
May 05 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
webpack-dev-server远程访问配置方法
Feb 22 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
angular多语言配置详解
May 16 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 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 采集程序 常用函数
2008/12/18 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
aspx中利用js实现确认删除代码
2010/07/22 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
python33 urllib2使用方法细节讲解
2013/12/03 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
Python中正则表达式的用法总结
2019/02/22 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
python os.fork() 循环输出方法
2019/08/08 Python
django框架两个使用模板实例
2019/12/11 Python
Python实现word2Vec model过程解析
2019/12/16 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
python中selenium库的基本使用详解
2020/07/31 Python
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
音乐系毕业生自荐信
2013/10/27 职场文书
实习推荐信
2014/05/10 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
收款授权委托书
2014/10/02 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
实验心得体会范文
2016/01/25 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python