详解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 相关文章推荐
javascript prototype 原型链
Mar 12 Javascript
Javascript 调试利器 Firebug使用详解六
Jul 05 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
JS制作简单的三级联动
Mar 18 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
vuex实现购物车功能
Jun 28 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
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
php标签云的实现代码
2012/10/10 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
Python实现豆瓣图片下载的方法
2015/05/25 Python
python实用代码片段收集贴
2015/06/03 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
python 实现字符串下标的输出功能
2020/02/13 Python
如何使用python传入不确定个数参数
2020/02/18 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
一些高难度的SQL面试题
2016/11/29 面试题
热能动力工程毕业生自荐信
2013/11/07 职场文书
护士自我介绍信
2014/01/13 职场文书
读书活动总结
2014/04/28 职场文书
新闻发布会策划方案
2014/06/12 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
教师年度考核个人总结
2015/02/12 职场文书
用电申请报告范文
2015/05/18 职场文书
利用Python实时获取steam特惠游戏数据
2022/06/25 Python