码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-06-23 17:27:26      阅读:97      评论:0      收藏:0      [点我收藏+]

标签:nload   his   col   win   load   引用   child   create   UNC   

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

标签:nload   his   col   win   load   引用   child   create   UNC   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!