在被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