思路: 通过调用函数 把 组件实例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的更多相关文章

  1. 在vue项目中的js文件里使用vue实例

    参考的网址:https://blog.csdn.net/weixin_34353714/article/details/86958742 不为其他,就为了记录一下,方便以后查看: 第一种方法: 1.首 ...

  2. 在js文件里调用另一个js文件里的函数

    这个是我今天解决的一个小问题,我在创建界面的时候,根据不同的界面需求对应创建了不同的js文件来搭建界面,搭建完毕之后再将各个生成页面的函数汇总到主界面上,通过visibility属性切换显示,这时候出 ...

  3. Vue main.js 文件中全局组件注册部分

    在 \src\components\index.js 文件中export组件 import HeaderList from './HeaderList' import HeaderMenu from ...

  4. Vue在单独引入js文件中使用ElementUI的组件

    Vue在单独引入js文件中使用ElementUI的组件 问题场景: 我想在vue中的js文件中使用elementUI中的组件,因为我在main.js中引入了element包和它的css,并挂载到了全局 ...

  5. vue cli3.0 封装组件全局引入js文件并发布到npm

    首先用 vue create创建一个项目 当前的项目目录是这样的: 首先需要创建一个 packages 目录,用来存放组件 然后将 src 目录改为 examples 用作示例 二.修改配置 启动项目 ...

  6. 在普通js文件里引入vue实例的方法

    首先是我是写了一个 Loading 插件然后 是挂在打vue.prototype 原型上的. 在main.js中use使用了这个插件. 至此vue原型是就被我挂上 $loadding方法了. 然后我想 ...

  7. JS引用另外JS文件的顺序问题。

    1.在a.js中可以引用b.js文件,这样就可以在网页中只引用a.js文件,从而可以使用a.js和b.js文件中的所有方法. 引用格式如下:document.write('<script typ ...

  8. node.js如何引用其它js文件

    以Java来说,比如要实现第三方存储,我可能需要导入对应的库,以maven为例,使用腾讯云或者七牛云.阿里云,我需要导入对应的maven依赖.再比如,有些时候我们封装某个类,而那个类不在该包下,我们需 ...

  9. BootStrap fileinput.js文件上传组件实例代码

    1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...

随机推荐

  1. Day 2 上午

    内容提要: 二叉搜索树 二叉堆 区间RMQ问题 二叉搜索树 前置技能本节课可能用到的一些复杂度:O(log n). n/1+n/2+...+n/n=O(n log n) 入门题: 给出N次操作,每次加 ...

  2. "大概能给你的磕盐增加一点幸福感✈"-[那些年的矫情]

    #--------------------------------------------------------------------------------------------------- ...

  3. 深入理解JVM(7)——线程安全和锁优化

    Java中的线程安全 按照线程安全的“安全程度”由强至弱来排序,可以将Java语中各种操作共享的数据分为以下5类:不可变. 绝对线程安全. 相对线程安全. 线程兼容和线程对立. 1.不可变 不变的对象 ...

  4. 我的第一个微信小程序

    今年国庆假期的时候,在家里带宝宝.想下载一个哄宝宝玩的游戏,从 App Store上搜索了一圈,发现评分高的基本上都是收费的.因为App Store上有限免机制,所以就萌发了做一款关注限免应用的小程序 ...

  5. 微信小程序地图控件篇 ---自定义图标被地图覆盖的问题

    今天在做微信小程序的时候遇到这个这样的问题  需要在地图上加个一个自定义的图标控件 类似这样的 刚开始的时候怎图片一直会被地图组件覆盖  ,要怎么解决这个问题  我去翻了下小程序的文档 有个cover ...

  6. tensorflow Pipeline 之TextLineReader 和decode_csv多分割替代方案

    1.TextLineReader reader = tf.TextLineReader() key, value = reader.read(filename_queue) record_defaul ...

  7. 03-oracle中的高级查询

    1.连接查询 1.1 使用连接谓词指定的连接 介绍: 在连接谓词表示形式中,连接条件由比较运算符在WHERE子句中给出,将这种表示形式称为连接谓词表示形式,连接谓词又称为连接条件. 语法: [< ...

  8. vue父子组件生命周期执行顺序

    之前写了vue的生命周期,本以为明白了vue实例在创建到显示在页面上以及销毁等一系列过程,以及各个生命周期的特点.然而今天被问到父子组件生命周期执行顺序的时候一头雾水,根本不知道怎么回事.然后写了一段 ...

  9. MySQL学习13 - 索引

    一.索引的介绍 二 .索引的作用 三.常见的几种索引: 3.1 普通索引 3.2 唯一索引 3.3 主键索引 3.4 组合索引 四.索引名词 五.正确使用索引的情况 什么是最左前缀呢? 六.索引的注意 ...

  10. Kafka安装配置

    Kafka是由Apache软件基金会开发的一个高吞吐量的分布式发布订阅消息系统,由Scala和Java编写.官网地址:http://kafka.apache.org 0.基本概念 Broker:Kaf ...