vue引用自定义.js文件 （常量抛出 + 地址三级联动为例）- 语法篇

vue如何引用自定义封装的 .js文件？

比如一个时间插件，地址联动插件，等等；
因为这些常用插件 在任意页面都有可能会用到，这时候需要把它封装成函数，供其他任意页面随意调用。

如何操作，详细如下。（注意代码注释部分：注意1/2/3/4/5）

---

一、效果图预览：

二、以自定义area.min.js文件为例：

/*省市区三级联动*/
var areajson = [   // 注意1：
	// json代码大部分省略 · 仅留一小部分参考如下
	{  
    children: [  
      {  
        children: [  
          {  
            value: "110101",  
            label: "东城区"  
          },
          {  
            value: "110108",  
            label: "海淀区"  
          },   
          {  
            value: "110115",  
            label: "大兴区"  
          },  
          {  
            value: "110116",  
            label: "怀柔区"  
          }
        ],  
        value: "110100",  
        label: "市辖区"  
      },  
      {  
        children: [  
          {  
            value: "110228",  
            label: "密云县"  
          },  
          {  
            value: "110229",  
            label: "延庆县"  
          }  
        ],  
        value: "110200",  
        label: "县"  
      }  
    ],  
    value: "110000",  
    label: "北京市"  
  },
  // 等等······
];
export default areajson;  // 注意2：一定要以export这种方式抛出

三、如何 在其他页面引入 ？

引入代码如下：

<templete>
	<!-- 大部分代码省略 -->
	
		<el-form-item label="求职地址" :label-width="labelWidth">
			<el-cascader
				:options="addressOptions"
				change-on-select
			></el-cascader>
		</el-form-item>
		<el-form-item label="" :label-width="labelWidth">
			<el-input v-model="form.detailaddress" placeholder="请输入求职者求职地域，例如：经开区明珠广场附近" autocomplete="off"></el-input>
		</el-form-item>

	<!-- 省略 -->
</templete>
<script>
import axios from 'axios'
import cityOptions from '../../../static/js/area.min.js'    // 注意3：

  export default {
		name: 'shareResume',
		cityOptions,    // 注意4：
   		data() {
	        return {
	        	// 工作地址 
	            addressOptions: cityOptions.areajson,     // 注意5：
	       }
        }
}

这时候，也 没有必要在main.js中全局引入； 只要你想引用，在任意页面这种方式引入调用都可以。

---

当然，你也可以在main.js中全局引入【我的一个时间戳格式转化器就是这么定义的。（详情参考相关项目main.js代码）】；

四、针对时间戳格式转化器说几点：

• 一般封装起来之后，可以把封装之后的.js文件，引入到main.js文件中，

• 这样其余页面调用的时候，只需要添加this.指针作为前缀，就可以使用封装的.js文件内自定义函数。

• 具体参考:
  项目main.js中的时间戳格式化代码和相关调用页面。

五、参考文章

• export和export dafault以及exports和moudle.exports的区别：（3、使用export default 抛出的变量）

---

以上就是关于“ vue引用自定义.js文件 （常量抛出 + 地址三级联动为例）- 语法篇 ” 的全部内容。