js 获取vue组件html_在被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 实例。

在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('

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

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

1.首先我们下载好fileinput插件引入插件 ? 1 2 3