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

以上。

原文地址:https://www.cnblogs.com/foxcharon/p/11073342.html

时间: 2024-10-03 10:45:04

vue邪道玩法 : 把vue实例存在别的地方,以及可能会遇到的问题的相关文章

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

Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. 话不多说,我们分别来看两个Demo:(欢迎star 欢迎pull request) 1.浏

Vue.js系列之二Vue实例

每个Vue应用都是通过Vue函数创建一个新的Vue实例开始,代码如下: var vm=new Vue({}); {}是创建Vue应用时的参数对象 1.Vue实例的data属性 当一个Vue对象被创建时,它向Vue的响应式系统中加入了其参数对象的data属性中所有的属性,当data属性中的属性发生改变时,视图会随之产生改变,根据新的属性值更新视图.代码如下: <body> <div id="tDiv"> {{message}} </div> </

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

author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-with-compiler.js & src/platforms/web/runtime/index.js 等文件中都有对Vue.prototype.$mount的定义: // vue/platforms/web/entry-runtime-with-compiler.js Vue.prototype.$mount = function ( e

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.数据驱动.双向绑定.MVVM设计模式.组件化开发.单页面应用 Vue环境:本地导入和cdn导入 2.Vue是渐进式js框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目.3.怎么使用vue 去官网下载然后导入 <div id="app">

webpack+vue+vueRouter模块化构建小demo实例超详细步骤(附截图、代码、入门篇)

说明:本demo使用yarn代替npm指令来下载一系列依赖,有详细指令说明:使用WebStorm下Terminal来输入指令: >开始(确认已经安装node环境和yarn包管理工具) 1.新建项目文件名为vuedemo 2.yarn add init  初始化项目 >安装项目依赖 3.yarn add vue 安装最新版vue 4.yarn add webpack webpack-dev-server  安装webpack,webpack-dev-server(是一个小型的Node.js Ex

js类型转换的各种玩法

前言 对于object和number.string.boolean之间的转换关系 [ ] Object 与Primitive,需要Object转为Primitive [ ] String 与 Boolean,需要两个操作数同时转为Number. [ ] String/Boolean 与 Number,需要String/Boolean转为Number. [ ] undefined 与 null ,和所有其他值比较的结果都是false,他们之间==成立 ToPrimitive是指转换为js内部的原始

Vue 全家桶,深入Vue 的世界

内容简介: Vue 实例上的属性 Vue 生命周期 Vue 数据绑定 computed 计算属性 watch 监听器 Vue 组件 Vue 组件 extend Vue 组件高级属性 Vue 的render Vue-router Vux Vue 实例上的属性 组件树 $parent :用来访问组件实例的父实例 $root : 用来访问当前组件树的根实例 $children :用来访问当前组件实例的直接子组件实例 $refs :用来访问ref指令的子组件 DOM访问 $el :用来挂载当前组件实例的

历数依赖注入的N种玩法

历数依赖注入的N种玩法 在对ASP.NET Core管道中关于依赖注入的两个核心对象(ServiceCollection和ServiceProvider)有了足够的认识之后,我们将关注的目光转移到编程层面.在ASP.NET Core应用中基于依赖注入的编程主要涉及到两个方面,它们分别是将服务注册到ServiceCollection中,和采用注入的方式利用ServiceProvider提供我们所需的服务.我们先来讨论ASP.NET Core应用中如何进行服务注册.[本文已经同步到<ASP.NET

微信赚钱:10万100万1000万级利润玩法尽在此

逐鹿出品!必属精品!看完这篇文章,可以把操蛋的微信书仍了...在 机场候机无聊的时候经常去书店看看畅销书,有关微信营销的书一堆,随便买了一本,耐着性子看了20分钟直接扔了,纯粹浪费时间,这个时代最不缺的就是海量 垃圾信息,正因为如此真正高效有价值和直达本质的信息显得越发重要,真希望以后写书的人书越写越薄,个人认为100页内的书是最好的,为了字数页数而写书 写那么厚浪费读者时间,这是谋财害命...不提微 商,不提各种概念,只提用微信怎么赚钱!(PS:谁说玩淘宝就不能玩微信了?我个人经历从最早的搜狗