Vue动态组件详细说明及全局事件绑定总结

最近在自学Vue的时候学会了一些基本用法，也记录了一些笔记。感兴趣的朋友可以查看我的其他文章。科技真的是不能只看的东西。你必须用手练习。只有在实战项目中才能发现问题，找到我们没有的知识点，然后发现问题，解决问题，这样才能提高我们的能力。

基于这个想法，我开始自己去旅游网站。旅游网站无法回避城市的选择，所以在城市选择清单实施过程中遇到的一些问题和解决方案，今天就记录下来总结一下。

城市列表选择组件

首先，让我们谈谈我们想要实现什么样的城市选择组件：

当输入框获得焦点时，显示组件点击城市列表以更新输入框的城市显示。单击其他空白组件将隐藏所选城市，而不是在切换到其他组件时重置

让我们一步一步地拆开它

第一步

在输入框获得焦点后显示组件非常简单。我们将焦点事件绑定到输入框，然后向组件发送显示状态。我们将isShowCityList传递给城市选择组件来控制行为。

El-input @ focus='是show city list=true' placeholder='请输入目的地'/el-input步骤2

我们不说太多。本文想介绍动态组件和全局事件之间的绑定，使用子组件给父组件，使用用户定义的事件$emit发送给父组件。

第三步

如果我们需要点击其他地方，城市组件是隐藏的。一些学生的第一印象可能是使用输入的模糊事件(即失去焦点的事件)。只要我们的输入失去焦点，我们就会隐藏它。

其实我的第一印象也是这样的，但是我们绑定了input失焦事件之后，在选择城市列表的时候，也是input失焦的时候，所以不能选择城市。显然，这种思维是行不通的。

所以这里只能用Vue全局事件的绑定，然后对我们点击的节点在哪里做一个判断，如果在城市组件之外，我们就隐藏起来。

在挂载钩子函数中，我们执行以下操作。

mounted(){ document . addevent listener(' click '，e={console.log('全局事件触发')；if(！这个。$ refs . search city . contains(e . target)){ this . IsLoadCityList=false；} });}好了，经过这一步，我们的问题就解决了。只要我们在这个容器外点击，城市列表组件就会被隐藏。我以为结束了，但这是不可能的，或者我太年轻了。这样做的后果是，无论我们点击哪里，它都会触发这个事件。即使当我们切换到其他组件时，事件仍然会被触发。显然这不是我们想要的，因为目前的事件将被无限期触发，这无疑会给我们带来

我们需要的最佳效果是，当前的全球事件将在当前组件下工作。当我们切换到其他组件时，事件会被自动删除，所以我可能想到的是使用beforeDestroy钩子函数来删除这个全局事件。也就是说，当我们切换到其他组件时，我们会删除这个全局事件。

before destroy(){ document . removeeventlistener(' click '，()={ //.});}你觉得我还能再解决问题吗？很明显，我们还是不行，或者说我们太年轻了，但是我们不能发布绑定事件，那么我们该怎么办呢？其实有一个坑，一个大坑，因为我不知道大坑，也没有查出来很多资料。因为穷人的思维是错误的，我最后问了一组里的一个大哥得到了答案。不得不说，和前辈交流很重要，可以帮你少踩很多坑。

如果要在这里解绑，解绑和解绑两个回调函数必须一致。你什么意思？看看代码就明白了。如果你不这样做，你就无法摆脱这个事件。至于更深层次的原因，我不太明白。稍后我会查阅一些资料。

methods : { issearchcity node(e){ if(！这个。$ refs . search city . contains(e . target)){ console . log('全局事件触发')；this.isLoadCityList=false} } }，挂载(){ document . addeventlistener(' click '，this . issearchcity node)；}，before destroy(){ document . removeeventlistener(' click '，this . issearchcity node)；}第四步

我们需要保留切换组件时选择的城市。如果我们不保留它，每次切换到其他组件时，我们选择的城市将被重置为默认值。这种体验肯定很差，不是我们想要的。

之所以被重置，是因为每次我们在不同的组件之间切换时，组件都会被构建和销毁，这也会导致重复渲染的问题，对性能也不友好。

那么我们该如何处理这个问题呢？我这里用keep-alive来解决这个问题，那么keep-alive怎么用，它的功能是什么？

Keep-alive组件v-bind : is=' current tab component '/component/keep-alive keep-alive包装了一个动态组件，该组件缓存非活动组件实例而不是销毁它们。它不会单独呈现DOM元素，也不会出现在父组件链中。

然而，当我们使用keep-alive时，我们的beforeDestroy钩子函数将失败，导致在第三步中解除全局事件的绑定，因为我们的组件是缓存的，而不是销毁的。自然会失败，但我们不着急。当我们使用保活时，激活和停用的钩子函数被触发。

激活：激活时调用：保持激活组件被激活。

停用：当保持活动组件停用时调用。

因此，不难发现，我们可以用这两个钩子来绑定和解除我们的全局事件，这是完美的。

activated(){ document . addeventlistener(' click '，this . issearchcity node)；}，停用(){ document . removeeventlistener(' click '，this . issearchcity node)；}摘要

通过一个城市列表组件的案例，介绍了如何在Vue中绑定全局事件并进行优化，大家一定要记住绑定和发布事件哪里有大漏洞。

我们可以创建一个可以通过keep-alive缓存的组件，我们将添加两个钩子函数供我们使用

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。