Vue组件引入外部的js文件的某方法或者静态数据

最新推荐文章于 2022-08-12 16:45:01 发布

原创最新推荐文章于 2022-08-12 16:45:01 发布 · 3.7k 阅读

10 ·

CC 4.0 BY-SA版权

本文介绍了在Vue组件中如何引入外部JS文件的方法，包括如何导入并使用特定方法，以及如何引入静态数组或属性。通过示例，详细阐述了两种方法：直接import方法和引入静态数据的方式，帮助开发者解决将公共方法和数据组织在独立文件中的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到问题
我们有时候会把一些公共方法写到一个单独的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';