摘要：我们需要的最好效果肯定是当前的全局事件就在当前的组件下产生作用，当我们切换到其他组件时，事件自动删除，于是我可能想到的就是利用钩子函数去删除这个全局事件。
最近在自学 Vue 也了解了一些基本用法，也记录了一些笔记有兴趣的朋友可以去查看我的其他文章，技术这东西真的不能光靠看，看是没有的，你必须要动手实践，只有在实战项目中才能发现问题，才能发现我们没有掌握的知识点，然后发现问题解决问题，我们的能力才能得以提升，要不然就有点眼高手低了。
基于这个想法于是就开始自己去撸了一个旅游网站，旅游网站嘛避免不了城市的选择，所以在实现城市选择列表的时候碰到的一些问题，以及解决办法今天就记录下来做一个总结。
城市列表选择组件首先说说我们要实现一个什么样的城市选择组件：
输入框获取焦点时，显示组件
点击城市列表更新输入框的城市显示
点击其他空白处组件隐藏
在切换到其他组件时，选择的城市保留而不是被重置
下面我们就一步一步的来拆解
第一步输入框获取焦点后显示组件很简单，我们给输入框绑定焦点事件然后给组件传入一个显示的状态即可，我们把 isShowCityList 传递给城市选择组件控制行为。
第二步
我们也不做过多的表述本文想更多的是介绍动态组件与全局事件的绑定，利用的是子组件给父组件利用自定义事件 $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，进行这一步之后，我们的问题得到了解决，只要我们点击这个容器以外的地方就会隐藏城市列表组件，我以为算是结束了，不过那是不可能的，还是我太年轻了，这样做的后果就是不管我们点击任何一个地方它都会触发这个事件，即使是我们切换到其他组件时，事件照样会被触发，显然这个不是我们想要的，因为当前事件会被无限触发，无疑会给我们带来不可预见的问题。
我们需要的最好效果肯定是当前的全局事件就在当前的组件下产生作用，当我们切换到其他组件时，事件自动删除，于是我可能想到的就是利用 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 该如何使用以及作用是什么呢？
但是当我们使用
activated：keep-alive 组件激活时调用。
deactivated：keep-alive 组件停用时调用。
所以我们不难发现，我们完全可以使用这两个钩子去实现我们全局事件的绑定与解绑，简直完美。
activated() {
document.addEventListener("click", this.isSearchCityNode);
},
deactivated() {
document.removeEventListener("click", this.isSearchCityNode);
}
总结
通过一个城市列表组件的案例，介绍了我们在 Vue 中如何绑定全局事件以及进行优化，一定要记住事件的绑定与解除哪里有一个大坑。
我们通过
文中如有不足之处，欢迎大神拍砖！
关注微信公众号：六小登登。领取全套学习资源
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/99183.html
摘要：今天我们继续使用的撸我们的实战项目，只有在实战中我们才会领悟更多，光纸上谈兵然并卵，继上篇我们的一个案例引发的动态组件与全局事件绑定总结之后，今天来聊一聊我们如何在项目中使用递归组件。 今天我们继续使用 Vue 的撸我们的实战项目，只有在实战中我们才会领悟更多，光纸上谈兵然并卵，继上篇我们的《Vue一个案例引发的动态组件与全局事件绑定总结》 之后，今天来聊一聊我们如何在项目中使用递归组...
摘要：既然我们知道了方法，我们就来给它加一个简单的动画。动画中还给我们提供了一些钩子函数，我们可以使用钩子函数构建动画。它会告知我们的动画完成，我们绑定了为，告诉组件跳过的检测，使用。 项目开发中动画有着很重要的作用，而且也是用到的地方非常多，例如：鼠标的进入离开，弹窗效果，组件的显示隐藏，列表的切换等等，可以说我们网页上的动画无处不在，也有人说了，这些东西也可以不使用动画。 对，你说的没错...
摘要：前端面试题总结持续更新中是哪个组件的属性模块的组件。都提供合理的钩子函数，可以让开发者定制化地去处理需求。 前端面试题总结——VUE（持续更新中） 1.active-class是哪个组件的属性？ vue-router模块的router-link组件。 2.嵌套路由怎么定义？ 在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。 //引入两个组件 ...
阅读 3954·2021-11-24 09:38
阅读 1423·2021-11-19 09:40
阅读 2780·2021-11-18 10:02
阅读 3692·2021-11-09 09:46
阅读 1769·2021-09-22 15:27
阅读 3112·2019-08-29 15:24
阅读 999·2019-08-29 12:40
阅读 1686·2019-08-28 18:24
