遇到问题

我们有时候会把一些公共方法写到一个单独的js文件,这样方便多处使用该方法,也很方便找到或者修改方法。
例:我们在写项目的时候会遇到加载本地城市列表的数据,如果放到vue组件里,是极其的不方便,我们来看看怎么解决这个问题。

解决方法

引入js的某个方法

  • 方法一

1.在公共js里写方法并export导出。

export function add(a) {
  let b = 2;
  return a+b;
}

2.在组件 import 引入。

import { add } from '../../data/cityLink'

3.使用该方法。

mounted(){
      add(1);
      //打印出来是3
      console.log("add=====",add(1))
    },
  • 方法二
    1.你还可以这么引入和使用。
  var Add = require("../../data/cityLink")
mounted(){
      Add.add(1);
    },

引入静态数组或者属性

1.在公共js里写方法并export导出。

export function staticArray(a) {
//这里原来是城市列表,代码太多顾用简单数组代替
  var tdata = [1,2,3,4,5]
  return tdata;
}

2.在组件引入并使用该方法。

import { staticArray } from '../../data/cityLink'
data () {
      return {
      //为什么这么写呢?
      //因为我这边的数据是二维数组,如果用下面的方法写一直会报错,某个属性未定义
      //简单数组两者都可
        pickData:staticArray(),
      }
    },

或者

data () {
      return {
        pickData:[],
      }
    },
mounted(){
      this.pickData = staticArray()
    },

如果js文件是一个静态数组(属性)时,也可以在组件中定义一个数组(属性)去接收js文件中的数组(属性),像这样:
this.arrayList = Add.dataArrayList ,然后在组件中使用arrayList 即可。


顺便一提,如何引入外部 css文件

@import '../../css/HelloWorld.css';
Logo

前往低代码交流专区

更多推荐