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 ...
随机推荐
- Java | 静态嵌套类(Static Nested Class)
前言 本文内容主要来自 Java 官方教程中的<嵌套类>章节. 本文提供的是 JDK 14 的示例代码. 定义 静态嵌套类(Static Nested Class),是 Java 中对类的 ...
- 尚硅谷 dubbo学习视频
1 1.搭建zookpeer注册中心 windows下载zooker 需要修改下zoo_sample .cfg为zoo.cnf 然后需要zoo.cnf中数据文件的路径 第五步:把zoo_sample ...
- ceph rbd块存储挂载及文件存储建立
一.rbd块存储挂载 1 创建一个OSD pool # ceph osd pool create rbd1 128 查询存储空间使用 # ceph df GLOBAL: SIZE AVAIL RAW ...
- 网络基础和 TCP、IP 协议
1.网络基本概念 1.1 什么是网络:一些网络设备按照一定的通讯规则(网络协议)进行通讯的系统. 1.2 VPN(虚拟私有网络)加密,相当于专线,从分支机构到总部. 1.3 资源共享的功能和特点: 数 ...
- 别逃避,是时候来给JVM一记重锤了
今天是猿灯塔“365天原创计划”第2天. 今天讲: 为什么写这个主题呢? 之前看到不少同学在讨论, 今天呢火星哥抽出点时间来帮大家整理一下关于JVM的一些知识点 一.JVM是什 ...
- 调试HotSpot源代码
之前的文章在Ubuntu 16.04上编译OpenJDK8的源代码 已经介绍过在Ubuntu上编译OpenJDK8的源代码,这一篇将介绍在Ubuntu上调试OpenJDK8源代码的2种方式. 1.GD ...
- 嘿,java打怪升级攻略
Java成神之路 第一层 java基础 **当你通过本层所有关卡,你可以完成一些简单的管理系统.坦克大战游戏.QQ通信等. ** 第二层 数据库 数据库类型很多例如:MySQL.oracle.redi ...
- directive 实例讲解
http://my.oschina.net/ilivebox/blog/289670 gulp-nodemon http://www.zhihu.com/question/32123388?sort= ...
- 洛谷 P3592 [POI2015]MYJ
题意 给定\(m\)个区间\([a_i,b_i]\)以及\(c_i\),对于一个含有\(n\)个元素的序列\(ans[]\),区间\(i\)对其的贡献为\(\min\{ans_i\}(i\in[a_i ...
- cin cout 的优化(神优化)外号:神读入
在比赛里,经常出现数据集超大造成 cin TLE的情况.这时候大部分人(包括原来我也是)认为这是cin的效率不及scanf的错,甚至还上升到C语言和C++语言的执行效率层面的无聊争论.其实像上文所说, ...