一般来说,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实例存在别的地方,以及可能会遇到的问题的更多相关文章

  1. 实例PK(Vue服务端渲染 VS Vue浏览器端渲染)

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...

  2. 前端框架之Vue(10)-全家桶简单使用实例

    vue-router官方文档 vuex官方文档 安装 npm install vue-router --save 使用实例 vue-router初使用(webpack-simple模板) 1.切换到指 ...

  3. Vue.js系列之二Vue实例

    每个Vue应用都是通过Vue函数创建一个新的Vue实例开始,代码如下: var vm=new Vue({}); {}是创建Vue应用时的参数对象 1.Vue实例的data属性 当一个Vue对象被创建时 ...

  4. 034——VUE中表单控件处理之使用vue控制radio表单的实例操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue入门之创建第一个实例,挂载点、模板和实例之间的关系

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 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.数据驱动.双向绑定 ...

  7. Vue框架(二)——Vue指令(v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令)、todolist案例、Vue实例(计算、监听)、组件、组件数据交互

    Vue指令 1.v-once指令  单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...

  8. Vue + ElementUI的电商管理系统实例01 登录表单

    效果图: 1.首先来根据Element网站实现布局: <template> <div class="login_container"> <div cl ...

  9. Vue源码分析(二) : Vue实例挂载

    Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-wi ...

随机推荐

  1. 【Spring注解驱动开发】使用InitializingBean和DisposableBean来管理bean的生命周期,你真的了解吗?

    写在前面 在<[Spring注解驱动开发]如何使用@Bean注解指定初始化和销毁的方法?看这一篇就够了!!>一文中,我们讲述了如何使用@Bean注解来指定bean初始化和销毁的方法.具体的 ...

  2. java后端无法接收到前端传递的json对象

    java后端无法接收到前端传递的json对象 一·可能是因为未使用@RequestBody 在Controller层中,要么使用@RestController要么使用@Controller+@@Req ...

  3. Package Control:There are no packages available for installation

    百度推荐的sublime3,里面好多全家桶,注意安装. 我的问题报错是:Package Control:There are no packages available for installation ...

  4. Nginx使用upstream实现负载均衡

    如果Nginx没有仅仅只能代理一台服务器的话,那它也不可能像今天这么火,Nginx可以配置代理多台服务器,当一台服务器宕机之后,仍能保持系统可用.具体配置过程如下: 1. 在http节点下,添加ups ...

  5. 禁用rm命令

    (1)[root@tf ~]# alias rm='echo do not use rm command'[root@tf ~]# vim /etc/profile   alias rm='echo ...

  6. JavaScript常用API合集汇总(一)

    今天这篇文章跟大家分享一些JavaScript常用的API代码,有DOM操作.CSS操作.对象(Object对象.Array对象.Number对象.String对象.Math对象.JSON对象和Con ...

  7. struts2+hibernate+spring简单整合且java.sql.SQLException: No suitable driver 问题解决

    最近上j2ee的课,老师要求整合struts2+hibernate+spring,我自己其实早早地有准备弄的,现在都第9个项目了,无奈自己的思路和头绪把自己带坑了,当然也是经验问题,其实只是用myec ...

  8. Dubbo及注册中心原理

    本文首发于微信公众号[猿灯塔],转载引用请说明出处 今天是猿灯塔“365天原创计划”第4天. 今天呢!灯塔君跟大家讲: 一.Dubbo意义 网站应用的架构变化经历了一个从所有服务分布在一台服务器上(A ...

  9. [译]高性能缓存库Caffeine介绍及实践

    概览 本文我们将介绍Caffeine-一个Java高性能缓存库.缓存和Map之间的一个根本区别是缓存会将储存的元素逐出.逐出策略决定了在什么时间应该删除哪些对象,逐出策略直接影响缓存的命中率,这是缓存 ...

  10. 「疫期集训day9」七月

    我们暂时被击退了,可恶的德国佬----我们集结了英国人,意大利人,荷兰人,澳大利亚人,来自世界各地,我们万众一心,还能失守亚眠?----亚眠中坚守的协约国士兵 日常考爆,T1貌似全场就我傻乎乎的推式子 ...