怎么在一个组件中使用另外一个.js文件里定义的方法

怎么在一个组件中使用另外一个.js文件里定义的方法

有时候给一个组件里的某些标签定义某些方法，会使代码量变多，可读性不强，如果一个组件里需要定义数种方法，可以把这些方法抽离出来，单独放进一个.js文件里，使用起来也比较方便，代码简单且可读性强
例如现在有以下需求：

当输入用户名之后判断用户名是否符合"3-12位数字、字母、下划线"的规范，无疑要用到正则表达式，且当鼠标在input输入框之外点击时判断，无疑要用到@blur事件。
如果我们在组件内部定义方法，代码如下：

<template>
	<el-input placeholder="用户名" @blur="appearErr1()" v-model="username">  //定义的方法
	</el-input>
</template>

<script>
	export default{
		data(){
			username:""
		}
		methods:{
			appearErr1(){
				const reg = /^\w{3,12}$/;  //用户名验证正则表达式
  				if(reg.test(this.username)==false){
	  				alert('用户名格式不正确')  //只要用户输入的用户名不符合规范就会弹出"用户名格式不正确"
 				 }
			}
		}
	}
</script>

但是如果将验证方法抽离到一个.js文件中，然后再组件中调用该方法，那么该怎么使用呢？

1. 先创建一个validate.js文件，里面定义一个判断函数，一定要记住使用export把validUsername函数导出

export function validUsername(username) {
	const reg = /^\w{3,12}$/;
	if (reg.test(username) == false) {
		alert('用户名格式不正确')
	}
}

2. 在组件中引用该函数

• 在组件中引入validate.js文件
• 在定义的方法中使用函数

<template>
	<el-input placeholder="用户名" @blur="appearErr1()" v-model="username">  //定义的方法
	</el-input>
</template>

<script>
	import { validUsername } from '@/utils/validate.js';   //在组件中引入validate.js文件
	export default {
		methods:{
			appearErr1(){
				validUsername (this.username);  //使用函数并传参
			}
		}
	}
</script>

效果如下：