zoukankan      html  css  js  c++  java
  • 在被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

  • 相关阅读:
    Mybaits-plus实战(三)
    Mybaits-plus实战(二)
    Mybaits-plus实战(一)
    面向对象的理解
    如何理解算法
    将yyyyMMdd HH:mm:ss格式的时间转换成时间类型
    泛型/dynamic/object作用
    成功之道
    ASP.NET注意事项
    Razor引擎总结
  • 原文地址:https://www.cnblogs.com/taohuaya/p/10765731.html
Copyright © 2011-2022 走看看