window跟vue变量互相绑定
js实现变量监听
//定义一个对象,挂载到window下,后续在任何模块中,给这个对象的show属性赋值,都将触发set对应的代码,我这么写主要是为了解决vue子组件向父组件传值的问题
window.mlistener={}
let _this = this
Object.defineProperty(mlistener,'show',{
set: function(val){
_this.showHeader = val
_this.showFoot = val
}
})
window变量触发vue渲染
可保持window变量,跟vue用到的变量同步更新
//将window赋值给vue变量
data() {
return {
tableH: ,
isShow: true,
filterText: '',
window: window,
tree_data: [],
expendKeys: [],
defaultProps: {
children: 'children',
label: 'label'
}
} //用法
{{window.getTest()}} //getTest()
window.getTest = ()=>{
console.dir(this.fullScreen)
return this.fullScreen
}
结果


参考
window跟vue变量互相绑定的更多相关文章
- Vue.js双向绑定的实现原理和模板引擎实现原理(##########################################)
Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...
- vue的双向绑定原理及实现
前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...
- 探讨vue的双向绑定原理及实现
1.vue的实现原理 vue的双向绑定是由数据劫持结合发布者-订阅者模式实现的,那么什么是数据劫持?vue是如何进行数据劫持的?说白了就是通过Object.defineProperty()来劫持对象属 ...
- 【Vue】vue的双向绑定原理及实现
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,那么vue是如果进行数据劫持的,我们可以先来看一下通过控制台输出一个定义在vue初始化数据上的对象是个什么东西. 代码: var ...
- [js高手之路] vue系列教程 - vue的事件绑定与方法(2)
一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 window.onload = function () { var c = new Vue({ el : 'b ...
- 西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
- Vue数据双向绑定原理及简单实现
嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...
- vue数据双向绑定原理
vue的数据双向绑定的小例子: .html <!DOCTYPE html> <html> <head> <meta charset=utf-> < ...
- 揭密 Vue 的双向绑定
Vue 中需要输入什么内容的时候,自然会想到使用 <input v-model="xxx" /> 的方式来实现双向绑定.下面是一个最简单的示例 剖析Vue原理& ...
随机推荐
- Eslint相关知识和配置大全
ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目.它的目标是提供一个插件化的javascript代码检测工具. 代码检查是一种静态的分析,常用于寻找有问题的模式或 ...
- 【转】Qt之JSON保存与读取
简述 许多游戏提供保存功能,使得玩家在游戏中的进度可以被保存,并在以后再玩的时候进行加载.保存游戏的过程通常涉及将每个游戏对象的成员变量序列化为文件.要实现这个功能,可以采取许多格式,其中之一就是 J ...
- django从零开始-模型
1.设置统计表 配置models.py from django.db import models # Create your models here. # 发布会 class Event(models ...
- TCP/UDP区别
一:1. 大体上来说,TCP和UDP都是通过Internet发送数据包的协议.都建立在Internet协议上.就是无论你是用TCP协议还是用UDP协议发送数据包,都会被发送到IP地址: 2.数据包的处 ...
- LVS搭建负载均衡(二)DR模型
应用场景:LVS配置负载均衡方式之一:dr 测试环境: 配置步骤: 1. 在主机lvs上安装ipvsadm ~]# yum install ipvsadm -y ~]# ipvsadm //启动:该命 ...
- 【转】MySQL常见错误代码及代码说明参考
Mariadb文档:https://mariadb.com/kb/zh-cn/mariadb/ MySQL文档:https://dev.mysql.com/doc/refman/8.0/en/ 100 ...
- [luogu1970][花匠]
题目地址 https://www.luogu.org/problemnew/show/P1970 题目描述 花匠栋栋种了一排花,每株花都有自己的高度.花儿越长越大,也越来越挤.栋栋决定 把这排中的一部 ...
- (转)source insight的使用方法逆天整理
转载自:https://www.cnblogs.com/xunbu7/p/7067427.html A. why SI: 为什么要用Source Insight呢?因为她比完整的IDE要更快啊,比一般 ...
- 配置ssl
1.配置 <Connector port="80" protocol="HTTP/1.1" connectionTimeout="20000&q ...
- 编码标准:ASCII、GBK、Unicode(UTF8、UTF16、UTF32)
英文编码(单字节字符集,码值范围0~127):字节最高位是0 ASCII编码,用于英文字符.中文编码(双字节字符集):首字节(8位)的最高位是1.可依据首字节最高位来判断中英文. GB2312, 旧版 ...