vue：.js 文件获取到 .vue 文件中的 this

矫情吗；* 2024-03-26 08:17 64阅读 0赞

**一、背景**

在js文件 abc.js 获取到 abc.vue 的this

作用：abc.js如果要使用 axios 等场景，这个时候需要使用到 this。

**二、sendThis 方法实现**

2.1、abc.js定义 sendThis 方法

let vm = null
    export const sendThis = ( _this )=> {
        vm = _this;
    };

2.2、abc.vue 在created() 声明周期 传递 this

2.2.1、引入sendThis方法

import { sendThis } from '@/const/abc.js'

2.2.2、created() 生命周期传递this

created() {
        sendThis(this)
    }

2.3、在abc.js中使用

export const form = [
      {
        key: 'name',
        title: '请输入名字',
        type: 'select',
        options: [],
        value: '',
        attr: {
          placeholder: '请输入名字',
          filterable: true,
          remote: true,
          'remote-method': (query) => {
            const cur = vm.form.find((item) => item.key === 'name');
            vm.$axios({
              method: 'post',
              url: url,
              data: {
                name: query,
              },
            })
              .then((res) => {})
            }
        }
    ]

经过测试，成功。

**三、abc.vue 赋值给对应的属性**

**3.1、abc.js**

export const form = [
      {
        key: 'name',
        title: '请输入名字',
        type: 'select',
        options: [],
        value: '',
        attr: {
          placeholder: '请输入名字',
          filterable: true,
          remote: true,
          'remote-method': ''
        }
    ]

**3.2、abc.vue 引入 form**

import { form } from '@/const/abc.js'

3.3、赋值

created() {
        this.form[0].attr['remote-method'] = this.remoteMethod;
    },
    method: {
        remoteMethod(){
            // do something
        }
    }

经过测试成功。

**四、.call() 方法**

4.1、abc.js

export const form = () => [
      {
        key: 'name',
        title: '请输入名字',
        type: 'select',
        options: [],
        value: '',
        attr: {
          placeholder: '请输入名字',
          filterable: true,
          remote: true,
          'remote-method': (query) => {
            const cur = vm.form.find((item) => item.key === 'name');
            vm.$axios({
              method: 'post',
              url: url,
              data: {
                name: query,
              },
            })
              .then((res) => {})
            }
        }
    ]

4.2、abc.vue 引入 form

import { form } from '@/const/abc.js'

4.3、 调用call方法

data(vm){
        return {
            formData: this.form.call(vm, vm)
        }
    }

这时候我们把this传递了过去，配置文件中可以使用this了。

**五、欢迎交流指正，关注我，一起学习。**

**参考链接：**

[在被vue组件引用的 js 文件里获取组件实例this][vue_ js _this]

[总结在vue项目中，js文件获取到this(vue实例) | 码农家园][vue_js_this_vue_ _]

[vue_ js _this]: https://www.bbsmax.com/A/x9J2LR2gd6/
[vue_js_this_vue_ _]: https://www.codenong.com/s1190000038258281/