在被vue组件引用的 js 文件里获取组件实例this
思路: 通过调用函数 把 组件实例this 传递 到 被应用的 js文件里
实例:
文件结构

在SendThis.vue 文件中引用 了modalConfig.js
import modalConfig from './modalConfig'
我们只要在 modalConfig.js文件里定义个函数和一个变量(用来存this)即可
//用来获取 调用此 js的vue 组件 实例 (this)
let vm = null; const sendThis = ( _this )=> {
vm = _this;
}; export default {
sendThis, //暴露函数 drawer: { //这里是测试代码, 假设这里会有其他暴露的变量
columns: [
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
},
{
title: '操作',
render: (h, params)=>{
return h('a',{
on: {
click: ()=>{ /*如果这里要使用 sendThis 实例 this*/ // this.handleShowDrawer();
// console.log(vm); //可以拿到组件 实例 了
vm.handleShowDrawer(); //调用组件实例中的函数 }
}
}, '抽屉');
}
}
]
}, }
在 SendThis.vue 问中定义的handleShowDrawer函数
methods: {
//这个函数会在 modalConfig.js 文件中触发
handleShowDrawer(){
this.showDrawer = true;
},
//把 modalConfig.js的 drawer.columns 赋值 给 this.columns1
handleTableColumn(){
let { columns } = modalConfig.drawer;
this.columns1 = columns;
}
},
下面我们只要在钩子函数中 调用 modalConfig.js 的 sendThis 方法, 把this传过去即可了
mounted() {
//发送this 到 js 文件里
modalConfig.sendThis(this);
}
此时: modalConfig.js 中 的 vm 就是 SendThis.vue 文件中的 this了。
---------------------------------------
还用一种方法是你把 一些属性和方法挂在到 vue实例原型上了, 可以在 某个js文件中这样拿到vue 实例。
详见 ---》 https://www.cnblogs.com/taohuaya/p/10296420.html
在被vue组件引用的 js 文件里获取组件实例this的更多相关文章
- 在vue项目中的js文件里使用vue实例
参考的网址:https://blog.csdn.net/weixin_34353714/article/details/86958742 不为其他,就为了记录一下,方便以后查看: 第一种方法: 1.首 ...
- 在js文件里调用另一个js文件里的函数
这个是我今天解决的一个小问题,我在创建界面的时候,根据不同的界面需求对应创建了不同的js文件来搭建界面,搭建完毕之后再将各个生成页面的函数汇总到主界面上,通过visibility属性切换显示,这时候出 ...
- Vue main.js 文件中全局组件注册部分
在 \src\components\index.js 文件中export组件 import HeaderList from './HeaderList' import HeaderMenu from ...
- Vue在单独引入js文件中使用ElementUI的组件
Vue在单独引入js文件中使用ElementUI的组件 问题场景: 我想在vue中的js文件中使用elementUI中的组件,因为我在main.js中引入了element包和它的css,并挂载到了全局 ...
- vue cli3.0 封装组件全局引入js文件并发布到npm
首先用 vue create创建一个项目 当前的项目目录是这样的: 首先需要创建一个 packages 目录,用来存放组件 然后将 src 目录改为 examples 用作示例 二.修改配置 启动项目 ...
- 在普通js文件里引入vue实例的方法
首先是我是写了一个 Loading 插件然后 是挂在打vue.prototype 原型上的. 在main.js中use使用了这个插件. 至此vue原型是就被我挂上 $loadding方法了. 然后我想 ...
- JS引用另外JS文件的顺序问题。
1.在a.js中可以引用b.js文件,这样就可以在网页中只引用a.js文件,从而可以使用a.js和b.js文件中的所有方法. 引用格式如下:document.write('<script typ ...
- node.js如何引用其它js文件
以Java来说,比如要实现第三方存储,我可能需要导入对应的库,以maven为例,使用腾讯云或者七牛云.阿里云,我需要导入对应的maven依赖.再比如,有些时候我们封装某个类,而那个类不在该包下,我们需 ...
- BootStrap fileinput.js文件上传组件实例代码
1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...
随机推荐
- 触发器SQL
CREATE TRIGGER FUEL.HDGJcoaldayexpend1_insertTRIGGER AFTER INSERT ON FUEL.coaldayexpend1 REFERENCING ...
- rockchip 3128 平台USB接口鼠标U盘功能调试日记
2019-04-12 关键词: rk3128 OTG.rk3128外接鼠标U盘.RK外接鼠标U盘 本篇文章是笔者根据自己当前所掌握知识对 rk3128 平台 USB 接口接鼠标实现输入功能调试的一个记 ...
- layui——Cannot create property 'LAY_TABLE_INDEX' on number '1'
前言 用layui写的后台,PHP处理好数据传输过来的时候报错了,最后发现是数据处理成layui格式的时候出错了,直接传了json对象过来,layui需要的是一个json的数. 解决 外面套成数组即可 ...
- 20165223《网络对抗技术》Exp4 恶意代码分析
目录 -- 恶意代码分析 恶意代码分析说明 实验任务目标 实验内容概述 schtasks命令使用 实验内容 系统运行监控 恶意软件分析 静态分析 virscan分析和VirusTotal分析 PEiD ...
- nexus5 root
LG nexus5 安装新的lineage 14.1系统卡刷 supersuV2.82失败,开机卡动画界面. 改回刷入2016年11月下的cm 13 的包,三清后卡刷supersuV2.82,成功.
- LOJ#2304 泳池
题意:有一个1001 * n的矩形,每个位置有q的概率为1.求紧贴下边界的最大的全1子矩形面积恰为k的概率.n <= 1e9,k <= 1000. 解:只需考虑每一列最下面一个0的位置. ...
- wordpress文章链接怎么把默认的别名改成id形式和伪静态设置
别名默认是文章标题,打不开,改成英文形式可以打开,但这样很不方便,还有可能重复.怎么改成按文章id自动生成相应链接呢 找到设置---固定链接----把默认的日期和名称型改成自定义结构把末尾的%post ...
- Abnormal Detection(异常检测)和 Supervised Learning(有监督训练)在异常检测上的应用初探
1. 异常检测 VS 监督学习 0x1:异常检测算法和监督学习算法的对比 总结来讲: . 在异常检测中,异常点是少之又少,大部分是正常样本,异常只是相对小概率事件 . 异常点的特征表现非常不集中,即异 ...
- flink-conf.yaml
Flink 配置文件 对于管理员来说,差不多经常调整的就只有 conf 下的flink-conf.yaml : 经过初步的调整,大约有以下模块的参数(未优化) Licensed to the Apac ...
- com.fasterxml.jackson工具类
老版本的Jackson使用的包名为org.codehaus.jackson,而新版本使用的是com.fasterxml.jackson. Jackson主要包含了3个模块: jackson-core ...