详解Vue 动态组件与全局事件绑定总结


Posted in Javascript onNovember 11, 2018

最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战项目中才能发现问题,才能发现我们没有掌握的知识点,然后发现问题解决问题,我们的能力才能得以提升,要不然就有点眼高手低了。

基于这个想法于是就开始自己去撸了一个旅游网站,旅游网站嘛避免不了城市的选择,所以在实现城市选择列表的时候碰到的一些问题,以及解决办法今天就记录下来做一个总结。

城市列表选择组件

首先说说我们要实现一个什么样的城市选择组件:

  • 输入框获取焦点时,显示组件
  • 点击城市列表更新输入框的城市显示
  • 点击其他空白处组件隐藏
  • 在切换到其他组件时,选择的城市保留而不是被重置

详解Vue 动态组件与全局事件绑定总结

下面我们就一步一步的来拆解

第一步

输入框获取焦点后显示组件很简单,我们给输入框绑定焦点事件然后给组件传入一个显示的状态即可,我们把 isShowCityList 传递给城市选择组件控制行为。

<el-input 
  @focus="isShowCityList=true"
  placeholder="请输入目的地">
</el-input>

第二步

我们也不做过多的表述本文想更多的是介绍动态组件与全局事件的绑定,利用的是子组件给父组件利用自定义事件 $emit 传给父组件。

第三步

需要我们去点击其他地方城市组件被隐藏,有些同学的第一印象可能是利用 input 的 blur 事件(就是失去焦点事件),只要我们的 input 失去焦点时,我们就隐藏。

其实我的第一印象也是如此,但是我们绑定的是 input 的失去焦点事件以后,当我们选择城市列表的时候也是 input 失去焦点的时候,所以我们就无法选取城市。显然这种思路是不行的。

所以这里我们只能去用到 Vue 的全局事件的绑定,然后去进行一个判断我们点击的节点是哪里,如果是城市组件以外我们就进行隐藏操作。

我们在 mounted 钩子函数中,进行如下操作。

mounted() {
  document.addEventListener("click", e => {
    console.log('全局事件被触发');
    if (!this.$refs.searchCity.contains(e.target)) {
      this.isLoadCityList = false;
    }
  });
}

OK,进行这一步之后,我们的问题得到了解决,只要我们点击这个容器以外的地方就会隐藏城市列表组件,我以为算是结束了,不过那是不可能的,还是我太年轻了,这样做的后果就是不管我们点击任何一个地方它都会触发这个事件,即使是我们切换到其他组件时,事件照样会被触发,显然这个不是我们想要的,因为当前事件会被无限触发,无疑会给我们带来不可预见的问题。

详解Vue 动态组件与全局事件绑定总结

我们需要的最好效果肯定是当前的全局事件就在当前的组件下产生作用,当我们切换到其他组件时,事件自动删除,于是我可能想到的就是利用 beforeDestroy 钩子函数去删除这个全局事件。也就是当我们切换到其他组件时,去删除这个全局事件。

beforeDestroy() {
  document.removeEventListener("click", () => {
   //...
  });
}

你以为这样我还就能解决问题了吗?显然还是不能,还是太年轻,只是这样我们是解除不了绑定的事件,那我们该怎么办呢?其实这里面有一个坑,大坑,因为这个大坑自己不知道,差了许多资料也没查出来,因为差的思路错了,最后在一个群里问了一个大佬,才得出答案,不得不说与前辈交流很重要啊,能帮你少踩很多坑。

这里如果想要解除绑定,解除和绑定的两个回调函数必须一致,什么意思呢?看代码你就明白。如果不这么操作,你是解除不掉事件的,至于更深的原因我也不怎么明白了,以后再去查阅一些资料。

methods: {
 isSearchCityNode(e) {
  if (!this.$refs.searchCity.contains(e.target)) {
   console.log("全局事件被触发");
   this.isLoadCityList = false;
  }
 } 
},
mounted() {
  document.addEventListener("click", this.isSearchCityNode);
},
beforeDestroy() {
  document.removeEventListener("click", this.isSearchCityNode);
}

第四步

需要我们在切换组件的时候保留我们选择的城市,如果不保留我们每次切换到其他组件时,我们选择的城市都会被重置为默认值,这个体验肯定是肯差的,也不是我们想要的。

被重置的原因则是我们在每次在不同的组件进行切换的时候,组件都会进行新建与销毁,这也会导致重复渲染问题对性能也是不友好的。

那么我们该如何去处理这个问题呢? 我这里使用了 keep-alive 去解决这个问题,那么 keep-alive 该如何使用以及作用是什么呢?

<keep-alive>
 <component v-bind:is="currentTabComponent"></component>
</keep-alive>

<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们,它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。

但是当我们使用 <keep-alive> 的时候,我们的 beforeDestroy 钩子函数就会失效,导致我们第三步的全局事件的解绑就不能执行了,原因是我们的组件是被缓存起来,并没有被销毁。自然会失效,但是我们并不慌,当我们使用 <keep-alive> 时,activated 和 deactivated 两个钩子函数被触发。

activated:keep-alive 组件激活时调用。

deactivated:keep-alive 组件停用时调用。

所以我们不难发现,我们完全可以使用这两个钩子去实现我们全局事件的绑定与解绑,简直完美。

activated() {
  document.addEventListener("click", this.isSearchCityNode);
},
deactivated() {
  document.removeEventListener("click", this.isSearchCityNode);
}

总结

通过一个城市列表组件的案例,介绍了我们在 Vue 中如何绑定全局事件以及进行优化,一定要记住事件的绑定与解除哪里有一个大坑。

我们通过 <keep-alive> 可以创建一个可以缓存的组件,而且会新增两个钩子函数提供我们使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 联动日历实现代码
May 31 Javascript
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
使用js画图之饼图
Jan 12 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
jQuery之动画效果大全
Nov 09 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
iView框架问题整理小结
Oct 16 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 #Javascript
AngularJS上传文件的示例代码
Nov 10 #Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 #Javascript
优雅的在React项目中使用Redux的方法
Nov 10 #Javascript
Vue组件之单向数据流的解决方法
Nov 10 #Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 #Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 #Javascript
You might like
3种平台下安装php4经验点滴
2006/10/09 PHP
php银联网页支付实现方法
2015/03/04 PHP
php循环table实现一行两列显示的方法
2015/06/04 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
JavaScript使用cookie
2007/02/02 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
理解AngularJs指令
2015/12/10 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
Scrapy的简单使用教程
2017/10/24 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
医药代表个人求职信范本
2013/12/19 职场文书
历史学专业求职信
2014/06/19 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
学校中秋节活动总结
2015/03/23 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
行政复议答复书
2015/07/01 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
Go 内联优化让程序员爱不释手
2022/06/21 Golang