一般来说,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. Vmaware克隆虚拟机后无法上网

    问题: 使用快照克隆了一台虚拟机 打开后发现无法上网,ifconfig查看状态 解决办法: 1.点击右下角的网络设置,点击设置,查看mac地址与文件/etc/udev/rules.d/70-persi ...

  2. SourceTree使用详解(连接远程仓库,克隆,拉取,提交,推送,新建/切换/合并分支,冲突解决)

    前言: 俗话说的好工欲善其事必先利其器,Git分布式版本控制系统是我们日常开发中不可或缺的.目前市面上比较流行的Git可视化管理工具有SourceTree.Github Desktop.Tortois ...

  3. Laravel 如何在blade文件中使用Vue组件

    Laravel 如何在blade文件中使用Vue组件 1. 安装laravel/ui依赖包 composer require laravel/ui 2.生成vue基本脚手架 php artisan u ...

  4. 在web开发中,为什么前端比后端更得到转行程序员的青睐?必看!

    1.Web开发分类与区别 人们通常将Web分为前端和后端,前端相关的职位有前端设计师(UI/UE),前端开发工程师,后端相关的有后端开发工程师. 2.技术栈区别 看各大招聘网站上,公司对前端开发工程师 ...

  5. PreparedStatement 防止sql注入 练习

    使用的数据库 MariaDB 10.5.4版本   端口1054     数据库为jt_db,表 为user 数据库的建表和插入相关数据代码: create table user( id int pr ...

  6. 【经典DP】洛谷 P2782 友好城市

    嘤嘤嘤,昨天两个文化课老师在上奥赛时招呼我(亲切交流),今天又要写工作报告,没时间写题解,希望今天能补上 友好城市 题目://洛谷那粘来的题面竟然能把格式粘过来 题目描述 有一条横贯东西的大河,河有笔 ...

  7. JAVA服务实例内存高问题排查及解决

    生产服务内存高问题 问题描述 1."计算中心" 服务在生产环境运行一段时间后,实际占用内存4.8G,业务运行正常,未出现OOM.(本文以此服务进行排查) 2.生产环境的老项目,均出 ...

  8. Windows 最值得推荐的装机必备“神器”软件大合集

    工欲善其事,必先利其器.每个人在平时使用电脑的过程中,多多少少都会积累一些好用的软件,我也不例外,从业这么多年,收藏了许多不错的软件,通过这篇文章都分享给大家.如果觉得不错,请把这篇文章分享给你的小伙 ...

  9. day28 作业

    import uuid import pickle import os # 学校类 class School: #校区的名字:如"老男孩上海校区" #校区的地址:如"上海 ...

  10. Let's GO(一)

    近来开始学Go,留此博客以记录学习过程,顺便鞭策自己更加努力. 人生苦短,Let's GO! Let's GO(一) Let's GO(二) Let's GO(三) Let's GO(四) 简单介绍 ...