vue邪道玩法 : 把vue实例存在别的地方,以及可能会遇到的问题
一般来说,VUE项目中,this指向VUE实例。
但有的时候,某些代码会改变this的指向。
这时,可以用一个临时变量存储VUE实例。
test1(){
var _this = this // 把vue实例的引用存一份
var arr = [imageObject,imageObject,imageObject]
for (let i in arr) {
arr[i].onload = function() {/* 此时的this指向被改变了 */}
}
}
但有时,你可能不得不在一开始就存一份vue实例的引用。
你可以在 created 阶段
window._this = this
然后在 beforeDestroy 阶段
window._this = null
那么问题来了:如果父组件和子组件都声明了
window._this = this
会怎样?回答:你的父组件的引用很可能会被子组件覆写。即,在父组件使用 _this 的时候,所指的会是子组件的VUE实例。
那怎么办呢?
你可以在父组件里声明一个对象,用来存储子组件的引用。
this.CHILD_VM = {
key1:CHILD_VM_1, // 子组件 1 的VUE实例的引用
key2:CHILD_VM_2, // 子组件 2 的VUE实例的引用
}
而在子组件中把存引用的代码改成:
_this.CHILD_VM.key1 = this
以上。
vue邪道玩法 : 把vue实例存在别的地方,以及可能会遇到的问题的更多相关文章
- 实例PK(Vue服务端渲染 VS Vue浏览器端渲染)
Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...
- 前端框架之Vue(10)-全家桶简单使用实例
vue-router官方文档 vuex官方文档 安装 npm install vue-router --save 使用实例 vue-router初使用(webpack-simple模板) 1.切换到指 ...
- Vue.js系列之二Vue实例
每个Vue应用都是通过Vue函数创建一个新的Vue实例开始,代码如下: var vm=new Vue({}); {}是创建Vue应用时的参数对象 1.Vue实例的data属性 当一个Vue对象被创建时 ...
- 034——VUE中表单控件处理之使用vue控制radio表单的实例操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue入门之创建第一个实例,挂载点、模板和实例之间的关系
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue框架(一)——Vue导读、Vue实例(挂载点el、数据data、过滤器filters)、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)
Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...
- Vue框架(二)——Vue指令(v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令)、todolist案例、Vue实例(计算、监听)、组件、组件数据交互
Vue指令 1.v-once指令 单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...
- Vue + ElementUI的电商管理系统实例01 登录表单
效果图: 1.首先来根据Element网站实现布局: <template> <div class="login_container"> <div cl ...
- Vue源码分析(二) : Vue实例挂载
Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-wi ...
随机推荐
- 【String注解驱动开发】面试官让我说说:如何使用FactoryBean向Spring容器中注册bean?
写在前面 在前面的文章中,我们知道可以通过多种方式向Spring容器中注册bean.可以使用@Configuration结合@Bean向Spring容器中注册bean:可以按照条件向Spring容器中 ...
- 谷歌Chrome成最受欢迎的浏览器 它为啥好用?
毫无疑问,在搜索引擎领域,谷歌是绝对的主导者.但是,一般人却很容易低估我们受到的“控制”.比如,它的浏览器Chrome. 在不到九年的时间,谷歌Chrome浏览器已经成为全球使用最多的网页浏览器.目前 ...
- SLAM数据集序列图片如何批量处理
SLAM数据集序列图片如何批量处理 原创:SLAM爬坑之行 引言:在SLAM学习过程中,有时候需要对大量的数据集比如TUM/KITTI等图片序列进行批量处理,这个时候需要用到opencv中的函数对图像 ...
- Redis - (Linux)安装与配置
Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis 与其他 key - value 缓存产品有以下三个特点: 1:Redis支持数据的持久化,可以将内存 ...
- CF #640 (div4)
CF640 div4 草 迟到半个月的补题 真正的懒狗 再懒就无了 D. Alice, Bob and Candies 题意:n个数字,奇数时间从左侧删数字,偶数时间从右侧删数字,每次删的数字之和必须 ...
- elasticSearch插件的安装以及使用nginx的modles收集nginx的日志
1.首先在windows环境上搭建es的集群 集群的配置如下 #node01的配置: cluster.name: es-itcast-cluster node.name: node01 node.ma ...
- Alink漫谈(八) : 二分类评估 AUC、K-S、PRC、Precision、Recall、LiftChart 如何实现
Alink漫谈(八) : 二分类评估 AUC.K-S.PRC.Precision.Recall.LiftChart 如何实现 目录 Alink漫谈(八) : 二分类评估 AUC.K-S.PRC.Pre ...
- 黑鸟码表BB10S骑行记录导入行者
前言 开始骑车用行者app记录, 后来觉得每次都要开app很麻烦, 于是在骑友的推荐下入手了黑鸟BB10S, 使用了一段时间感觉还不错, 不过也遇到之前大家说的问题, 黑鸟不支持直接导出fit文件, ...
- Glusterfs的安装、创建卷、配置和优化卷、挂载使用
一.网站推荐 1.https://gluster.readthedocs.io/en/latest/ 这是官方的说明网站.这里面有安装Glusterfs原理,安装流程,各种卷的原理.创建方式.以 ...
- hive中如何查询除了其中某个字段剩余所有字段
想要将hive分区表中的某个分区复制到新的分区中,使用如下sql语句 insert overwrite table zcfw_sda.sda04_core_request_base_ratio_ifr ...