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 ...
 
随机推荐
- Springboot项目整合Swagger2报错
			
SpringBoot2.2.6整合swagger2.2.2版本的问题,启动SpringBoot报如下错: Error starting ApplicationContext. To display t ...
 - Typescript的interface、class和abstract class
			
interface,class,和abstract class这3个概念,既有联系,又有区别,本文尝试着结合官方文档来阐述这三者之间的关系. 1. Declaration Merging Declar ...
 - 3、尚硅谷_SSM高级整合_使用ajax操作实现修改员工的功能
			
当我们点击编辑案例的时候,我们要弹出一个修改联系人的模态对话框,在上面可以修改对应的联系人的信息 这里我们我们要编辑按钮添加点击事件弹出对话框 第一步:在页面中在新增一个编辑联系人的模态对话框 第二步 ...
 - 多线程集成设计模式--future模式
			
多线程开发可以更好的发挥多核cpu性能,常用的多线程设计模式有:Future.Master-Worker.Guard Susperionsion 一.什么是Future模型: 该模型是将异步请求和代理 ...
 - C# 人脸识别库
			
.NET 人脸识别库 ViewFaceCore 这是基于 SeetaFace6 人脸识别开发的 .NET 平台下的人脸识别库这是一个使用超简单的人脸识别库这是一个基于 .NET Standard 2. ...
 - Halcon斑点分析官方示例讲解
			
官方示例中有许多很好的例子可以帮助大家理解和学习Halcon,下面举几个经典的斑点分析例子讲解一下 Crystals 图中显示了在高层大气中采集到的晶体样本的图像.任务是分析对象以确定特定形状的频率. ...
 - JavaScript图形实例:窗花图案
			
1.窗花基本框线 设定曲线的坐标方程为: n=25; r=100; x=r/n*cos(5*θ)+r*cos(θ); y=r/n*sin(5*θ)+r*sin(θ); (0≤θ≤2π ...
 - P2114 [NOI2014]起床困难综合症【二进制运算+优化】
			
起床困难综合症[二进制运算+优化] 题目描述 21世纪,许多人得了一种奇怪的病:起床困难综合症,其临床表现为:起床难,起床后精神不佳.作为一名青春阳光好少年,atm一直坚持与起床困难综合症作斗争.通过 ...
 - Pop Sequence  题解
			
Pop Sequence(PAT) https://www.nowcoder.com/pat/5/problem/4090 前言: PAT上一道Stack的应用题,简化版的有<信息学一本通·普及 ...
 - 使用 Egg + Vue 的第一个线上小产品——远程工作职位信息收集站点 yuancheng.works
			
小插曲 开始很纠结,买了一个 yuancheng.works 域名会不会冒犯到 yuancheng.work 站长. 还在群里咨询了 @Phodal 等前辈.重新搞一个新域名,yuancheng.wo ...