在vue2中,如果希望在页面模板template中访问外部js文件中定义的内容,如函数,比较麻烦,我们来看具体的例子,外部server.js文件如下:

const SERVER_IMAGE_BASE_URL = 'http://42.51.17.36:888';


export const getImageUrl = url=>{
	return SERVER_IMAGE_BASE_URL + url;
}

 在vue文件中要使用的话,可以使用以下两种方法,如果要在多个页面中使用的话,最好采用第二种方法。

方法一:

在script中导入server.js文件中定义的getImageUrl方法,在methods中定义函数,代码如下:

<script>
	import {getImageUrl} from '@/utils/server.js'
	export default {
		data() {
			return {
			}
		},
		methods: {
			getUrl(url){
				return getImageUrl(url);
			}
		}
	}
</script>

这样在template中,就可以这样使用了:

<span>{{getUrl('/abc/a.jpg')}}</span>

方法二:

采用指令的方式,将函数注入到Vue中。

(1)在main.js中引入函数所在的js文件server.js

import { getImageUrl } from '@/utils/server'

(2)在main.js文件中,使用指令,将上面的方法注入。

const Plugin = {
	install(vue,options){
		vue.prototype.getImageUrl = getImageUrl;
	}
}
Vue.use(Plugin)

(3)在template中即可直接使用方法getImageUrl,如下:

<text>{{getImageUrl('/abc/b.jpg')}}</text>

在vue3中使用更方便简单了。但是需要使用setup语法糖,我们只需要在script标签中,引入server.js中的方法即可在template中使用该函数。

<script setup>
import { get_img_url } from '../utils/urls';
</script>
 <img :src="get_img_url(abc.png)" alt="">

Logo

前往低代码交流专区

更多推荐