vue引用外部js

一、引用：引用外部数据或者方法

1、先新建一个js文件，如我的

export const list1 = [
  { code: 'abc', id: 1 },
  { code: 'def', id: 2 },
];
export const list2 = [];
export const list3 = [];

export function getColumnsData(dateType) {
  if (dateType=== 1) {
    return [4,5,6];
  } else {
   return [1,2,3];
}

 注意js文件中不能使用this.，如使用router

import router from '@/router';
export const userName = {
  title: '用户名',
  minWidth: 130,
  // tooltip: true,
  key: 'userName',
  align: 'center',
  customOrder: 6,
  render: (h, params) => {
    const abtn= h(
      'a',
      {
        on: {
          click: () => {
            if (params.row.teacherOrStuFlag === 2) {
              return;
            }
            let query = {
              userId: params.row.id,
            };
            //
            router.push({
              name: 'userDetail',
              query
            });
          }
        }
      },
      params.row.userName
    );
    //绘制所有的操作控件
    return h(
      'div',
      {
        class: {
          'text-overflow': true
        }
      },
      [abtn]
    );
  }
};

2、引用：

import { list1 , list2,list3,getColumnsData } from '../common/module.js';

 注意imoprtt引进的内容不可以用this去指向，可以在data中定义一个变量，把import内容赋值给本地对象，如我：

data(){
 return{
    list1:[],
    list2:[],
    list3:[]
  }
}

created(){
   this.list1 = list1;
   this.list2 = list2;
   this.list3 = list3;
   this.columnsData = getColumnsData(1);
}

或者data中定义而不赋值：

import { eduSystemSelectData } from '@/utils/constant';
data{
   return{
    eduSystemSelectData
  }
}

二、全局引用：如果一个js文件被频繁使用，不想每次在被引用文件中使用import 相对路径来单独引入，可以在main.js中使用Vue.user(arg)设置为全局引用。

如：

import VueQuillEditor from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
Vue.use(VueQuillEditor);