详解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，进行这一步之后，我们的问题得到了解决，只要我们点击这个容器以外的地方就会隐藏城市列表组件，我以为算是结束了，不过那是不可能的，还是我太年轻了，这样做的后果就是不管我们点击任何一个地方它都会触发这个事件，即使是我们切换到其他组件时，事件照样会被触发，显然这个不是我们想要的，因为当前事件会被无限触发，无疑会给我们带来不可预见的问题。
我们需要的最好效果肯定是当前的全局事件就在当前的组件下产生作用，当我们切换到其他组件时，事件自动删除，于是我可能想到的就是利用 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> 可以创建一个可以缓存的组件，而且会新增两个钩子函数提供我们使用
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue组件从开发到发布的实现步骤
本文介绍了vue组件从开发到发布的实现步骤,分享给大家,具体如下: 组件化是前端开发非常重要的一部分,从业务中解耦出来,可以提高项目的代码复用率.更重要的是我们还可以打包发布,俗话说集体的力量是伟大的,正因为有许许多多的开源贡献者,才有了现在的世界. 不想造轮子的工程师,当不了合格的搬运工 .让我们来了解一下vue组件从开发到打包发布流程,并配置Github主页. 本文以 vue-clock2 组件为例,欢迎star _~~ 项目地址 目标框架:vue 打包工具:webpack 发布源:npm
-
vue.js自定义组件directives的实例代码
自定义指令:以v开头,如:v-mybind. 代码示例: <input v-mybind /> directives:{ mybind:{ bind:function (el) { el.value = "this is mybind-bind" } }} 这时页面初始化时,input中会显示this is mybind-bind. 通过directives注册自定义指令mybind,每一个自定义指令中又提供若干钩子,如示例中的bind,bind的作用是定义一个在绑定时执行
-
详解如何制作并发布一个vue的组件的npm包
前提:1.会vue基础,以及vue的组件(官网:https://cn.vuejs.org/v2/guide/components.html)相关的基础. 因为本文主要是讲如何把一个vue组件做成npm包并发布. 分为2大步骤: 一.按照相应格式写我们的vue代码(就如同写一个jquery插件时.有其固定的格式一样). 二.发布到npm上的流程 一.书写一个vue组件 不用脚手架,我们自己从头开始做起,因为脚手架会附带很多没用的东西. 就做一个最简单的vue组件:就是传入用户名字,页面打印出'he
-
Vue项目引进ElementUI组件的方法
环境要求 Nodejs Nodejs 官网下载地址:http://nodejs.cn/download/具体安装参考其他资料 打开cmd命令行,输入npm -v,如果出现如下图的显示,说明已经安装正确. 如果安装版本比较老,想升级新版本 npm install npm -g 安装 webpack 安装webpack npm install webpack -g -g 表示安装为全局 安装 vue-cli 安装 vue 脚手架项目初始化工具 vue-cli npm install vue-cli
-
Vue组件之单向数据流的解决方法
子组件能够通过自身的props选项获取父组件上的数据,但是在默认情况下,props是单向绑定的---当父组件数据(属性)发生变化的时候会传递给子组件,引起子组件的变化,但不能反过来并且不允许子组件直接改变父组件的数据,会报错的.例如: 也就是说当通过一种方法改变父组件数据的时候,子组件与之相关联的props数据也会发生改变,从而影响子组件,但是子组件直接改变从父组件拿过来的props数据却不能影响父组件的原始数据.也就是说一般情况下只能是"父影响子,而不是子影响父". 两种情况: 1.
-
详解Vue组件插槽的使用以及调用组件内的方法
组件传参 通过给组件传递参数, 可以让组件变得更加可扩展, 组件内使用props接收参数 export default { props: ['options'], data(){ return {} } } 但是这个方法有局限性, 例如我写了一个对话框组件, 对话框的内容是自定义的 如果我只是显示文字的话, 我可以简单的将字符串传进去props: ['message'] 但是如果需要在其中添加一个按钮的话, 这种方法就显得很笨重了, 所以我们用另一种办法 插槽 slot 插槽 slot的使用就像
-
详解Vue 动态组件与全局事件绑定总结
最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战项目中才能发现问题,才能发现我们没有掌握的知识点,然后发现问题解决问题,我们的能力才能得以提升,要不然就有点眼高手低了. 基于这个想法于是就开始自己去撸了一个旅游网站,旅游网站嘛避免不了城市的选择,所以在实现城市选择列表的时候碰到的一些问题,以及解决办法今天就记录下来做一个总结. 城市列表选择组件 首先说说我们要实现一个什么样的城市选择组
-
详解Vue中组件的缓存
之前在<Vue一个案例引发的动态组件与全局事件绑定总结>这篇文章中简单提到过组件的缓存.当时只是简单的提供了一个解决问题的思路,并没有说到多少组件缓存的东西,今天我们就来详细说说组件的缓存. 组件化开发模式下,我们会把整个项目拆分成很多组件,然后按照合理的方式组织起来. 自然就存在组件之间的切换问题,Vue 中有个「动态组件」的概念,它能够让我们更好的实现组件的切换. 在实际的项目开发中,产品是不可能放过我们的,需求总是在不停的变化,如果你碰到那些不改需求的产品就嫁了吧,太难得了. 最近项目中
-
详解Vue的组件中data选项为什么必须是函数
官方解释 data 必须是函数 构造 Vue 实例时传入的各种选项大多数都可以在组件里使用.只有一个例外:data 必须是函数.实际上,如果你这么做: Vue.component('my-component', { template: '<span>{{ message }}</span>', data: { message: 'hello' } }) 那么 Vue 会停止运行,并在控制台发出警告,告诉你在组件实例中 data 必须是一个函数.但理解这种规则为何存在也是很有益处的,
-
详解vue父子组件状态同步的最佳方式
哈喽!大家好!我是木瓜太香,一位老牌儿前端工程师,平时我们在使用 vue 开发的时候,可能会遇到需要父组件与子组件某个状态需要同步的情况,通常这个是因为我们封装组件的时候有一个相同的状态外面要用,里面也要用,今天我们就来看看怎么优雅的解决这个问题吧! 一般来说我们实现这个功能,只需要父组件通过 props 传递给子组件就好了,但是理想很丰满,现实很骨感,如果我们直接在子组件更改传进来的 props ,不出意外浏览器会给你一坨大红色的报错,因为在 vue 中我们的数据流动是自上而下的,而子组件直接
-
详解vue 模版组件的三种用法
本文介绍了详解vue 模版组件的三种用法,分享给大家,具体如下: 第一种 //首先,别忘了引入vue.js <div id="user_name_01"></div> <script src="../node_modules/vue/dist/vue.js"></script> <script> var User_01 = Vue.extend({// 创建可复用的构造器 template: '<p&
-
详解Angular动态组件
使用场景 我们先明确下动态组件的使用场景,在代码运行时要动态加载组件,换成普通人话,代码需要根据具体情况(比如用户的操作,向后台请求结果)确定在某些地方加载某些组件,这些组件不是静态的(不是固定的). 官网的举例就是,构建动态广告条,广告组件不断会推出新的,再用只支持静态组件结构的模板显然是不现实的. 再举一个常见的例子,动态弹出框,弹出的组件是不确定的.不断更新的,这里那里弹出个购买框,那那那又需要弹出样式选择框,静态组件结构模板是不能满足群众日渐增长的需求. 怎么实现 然后我们来找个把手,看
-
详解vue 动态加载并注册组件且通过 render动态创建该组件
基于 iview Tabs 组件实现 功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue <template> <div class="content-left-menu"> <div class="item-contain layout-content"> <Tabs class="cmcc-ivu-tab2" t
-
详解vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + es6 + 组件化. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - lib/components/calendar |- calendar.css |-
-
详解vue跨组件通信的几种方法
在开发组件的时候,一定会遇到组件的通信,比如点击一个图标出现弹窗和蒙层,这三个分别是不同的组件.管理他们之间的状态就成了问题. props双向绑定 通过 sync 双向绑定,属性变化会同步到所有组件,这也是最简单的实现方式,缺点是属性会比较多.实现方式如下 App.vue 文件 <template> <div id="app"> <mask :hide-mask.sync="hideMask"></mask> <
-
详解Vue中组件传值的多重实现方式
vue中组件传值方式整理 1.我们最熟悉的父子组件传值 父->子 props 子->父 $emit 这些我们最常用的就不说了,如果有不理解的,俺这儿有篇不错的文章,链接奉上~ https://www.cnblogs.com/LoveAndPeace/p/7273648.html 2.兄弟组件或无关系组件之间的传值 我们最常用的方式采用一个第三方变量 俗称eventbus 通过其中一个$emit发另一个$on接收的方式 实现组件传值 main.js中挂载一下 在其中一个页面$emit 另一个页面