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

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

html下拉列表用ul,Vue.js做select下拉列表的实例(ul-li标签仿select标签)
目标:用ul-li标签结合Vue.js知识做一个模仿select标签的下拉选项列表. 知识点: 组件的写法及运用组件之间的数据传递(props的运用) 组件之间的数据传递($emit的运用) 动态数 ...
html 存储登录状态,Vue中保存用户登录状态实例代码
首先我们假设,这里的登录组件(register.vue)是App.vue组件的子组件,是通过路由进入登录组件的. 登录组件中用户点击登录后,后台会传过来一个用户名,我的App.vue组件中需要拿到这个 ...
趣谈预留实例券，一文搞懂云上省钱最新玩法
ECS近期推出了预留实例券(Reserved Instances),简称RI,这东西很cool,今天我们聊聊这个. 首先这篇Blog不是文档,读完后想详细了解文档的朋友请点击一个小故事我来给大家讲 ...
（vue基础试炼_07）Vue实例生命周期函数
文章目录一.生命周期图示二.常见的生命周期函数三.生命周期函数执行场景四.测试代码五.项目开源地址一.生命周期图示二.常见的生命周期函数常见的生命周期函数执行的时间 beforeCr ...
前端vue后端java,Vue调用后端java接口的实例代码_亦心_前端开发者
前段时间做了个学校的春萌项目,其中用到先上后端接口代码: package controller; import net.sf.json.JSONObject; import util.DBUtil ...
vue + element-ui 聊天_vue网页版聊天Vue+ElementUI仿微信界面聊天实例
vue+vuex+vue-cli+vue-router+element-ui+swiper等技术开发仿微信pc端界面聊天应用,实现了发送消息+表情(动图gif).图片/视频预览.右键长按菜单.红包/朋 ...
vue简单的图片相册幻灯片实例
vue简单的图片相册幻灯片实例 [原创]基于Vue.js构建的响应式的图片幻灯片,图片相册,大图切换展示代码.动态设置图片url路径,来实现简单的图片切换效果. 演示地址下载地址
vue重构html css,使用vue重构资讯页面的实例代码解析
从我接手到将这个页面代码重构前,一直都还是使用angular1的代码去做的,需求来了也是用angular去实现:作为一个憧憬新技术的前端,怎么忍受得了现在还在使用这么有历史感的框架,所以,以前就一直在 ...
vue动态获取css样式,Vue 框架之动态绑定 css 样式实例分析
今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分首先说一下动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=""就可以了,使 ...

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

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

最新文章

热门文章