vue 内部this变了 引入js_在被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;

};

exportdefault{

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 实例。