最近在碰到有同学问我,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的函数作为一等公民还有很多有趣的应用。

总结

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

华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。