详解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 相关文章推荐
转换字符串为json对象的方法详解
Nov 29 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
vue2 全局变量的设置方法
Mar 09 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
Vue表单之v-model绑定下拉列表功能
May 14 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
electron 安装,调试,打包的具体使用
Nov 06 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
JavaScript高级程序设计
2006/12/29 Javascript
javascript控制frame,iframe的src属性代码
2009/12/31 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
python制作花瓣网美女图片爬虫
2015/10/28 Python
python动态加载包的方法小结
2016/04/18 Python
Python yield 使用方法浅析
2017/05/20 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
应届生的求职推荐信范文
2013/11/30 职场文书
2014年高三毕业生自我评价
2014/01/11 职场文书
建筑公司员工自我鉴定
2014/04/08 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
暂住证证明
2015/06/19 职场文书
市级三好生竞选稿
2015/11/21 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS