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原理& ...
随机推荐
- 关于360插件化Replugin Activity动态修改父类的字节码操作
近期在接入360插件化方案Replugin时,发现出现崩溃情况. 大概崩溃内容如下: aused by: java.lang.ClassNotFoundException: Didn't find c ...
- 【BZOJ3167】[HEOI2013]SAO(动态规划)
[BZOJ3167][HEOI2013]SAO(动态规划) 题面 BZOJ 洛谷 题解 显然限制条件是一个\(DAG\)(不考虑边的方向的话就是一棵树了). 那么考虑树型\(dp\),设\(f[i][ ...
- 【BZOJ5213】[ZJOI2018]迷宫(神仙题)
[BZOJ5213][ZJOI2018]迷宫(神仙题) 题面 BZOJ 洛谷 题解 首先可以很容易的得到一个\(K\)个点的答案. 构建\(K\)个点分别表示\(mod\ K\)的余数.那么点\(i\ ...
- Python里的赋值 拷贝 深拷贝
import copy a = [1, 2, 3, 4, ['a', 'b']] #原始对象 b = a #赋值,传对象的引用 c = copy.copy(a) #对象拷贝,浅拷贝 d = copy. ...
- CentOS6 部署 Tomcat
安装java软件 yum install java-1.8.0* -y 设置开机自启,在/etc/init.d/下新建 tomcat 写入以下内容: #!/bin/bash # /etc/rc.d/i ...
- VS Code汉化
F1搜索 Configure Language { // Defines VS Code's display language. // See https://go.microsoft.com/fw ...
- canvas的api小结
HTML <canvas id="canvas"></canvas> Javascript var canvas=document.getElementBy ...
- python pip NameError:name 'pip' is not defined”
https://www.jianshu.com/p/f57f98ebcb21 问题: 如果直接在命令行里面输入pip或者pip3,提示:(如图1) “NameError:name 'pip' is n ...
- HTML学习笔记Day10
一.Form表单补充(收集用户信息) 1.button按钮(不进行提交) 1)语法1:<input type="button" value="按钮内容" ...
- python 操作 saltstack Api(二) 示例
获取token #!/usr/bin/env python #-*-coding:utf--*- import urllib import urllib.parse import urllib.req ...