思路: 通过调用函数 把 组件实例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 实例。