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

一、背景

在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实例) | 码农家园