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

2024-07-11 19:35| 来源: 网络整理| 查看: 265

遇到问题

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

【本文地址】

公司简介

联系我们