关于vue全局引用公共的js和公共的组件的折腾

前沿

---

最近在项目开发中遇到一些需要全局引用的公共js,或者公共组件，早就烦死了那种每个页面都写一遍，都引用一个js的写法，正好vue解决了这个额问题，于是乎就开始折腾,折腾的过程中也发现了一些自己之前未遇到的坑，就纪录下来，方便自己学习e。

---

一，先看看全局组件的引用，就拿最常用的全局的暂无数据来举例，看看全局的是如何实现的。

Step1,首先在components创建一个公共的目录，NoDatas目录里边包含index.vue和index.js,index.vue用来写公共的页面，index.js用来导出这个组件。

<template>
<!-- NoDataWords 可以灵活控制每个页面显示的内容  -->
<!-- NoDataHeight 可以灵活控制每个页面的高度  -->
<!-- 如果你的页面都是统一的字体，统一的样式,那就直接在这写死就好了 -->
    <div class="NoDataAtAll W100"
         :style="{height: NoDataHeight }">{{NoDataWords}}</div>
</template>
<script>
export default {
  // 就是基本的父子组件传值
  props: ["NoDataHeight", "NoDataWords"],
  data() {
    return {};
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.NoDataAtAll {
  font-size: 14px;
  color: #909399;
}
</style>

Step2: 然后就是在index.js中注册该组件

import NoDataS from './index.vue'
const noDataLists = {
    install: function(Vue) {
        // 注册并获取组件，然后在main.js中引用，在Vue.use()就可以了
        Vue.component('noDataLists', NoDataS)
    }
}
export default noDataLists

steps3:在main.js中引入并使用该组件

import noDataLists from '@/components/NoDatas/index'
Vue.use(noDataLists);

至此，就可以完美的使用了。

二，再来聊聊全局公共的js的引用，就拿转换日期格式来举例，看看全局的是如何实现的。

Step1,首先在components创建一个公共的js,然后直接在main.js中引入，需要注意的是######引入后不能直接使用，必须在vue的原型链(prototype)里边注册，才可以使用。

// 公共的js
//日期格式转换
export function FromDates(StringDate) {
    let T = "",
        N = "",
        Y = "",
        R = "";
    for (let i = 0; i < StringDate.length; i++) {
        N = StringDate.substring(0, 4) + "-";
        Y = StringDate.substring(4, 6) + "-";
        R = StringDate.substring(6, 8);
        T = N + Y + R;
        return T;
    }
}
//日期时间去横杠
export function FromDatesCancle(StringDate) {
    let CanTime = [];
    for (let i = 0; i < StringDate.length; i++) {
        if (StringDate[i] !== "-") {
            CanTime.push(StringDate[i]);
        }
    }
    return CanTime.join('');
}

step2:然后再main.js中引入并注册

import {FromDates,FromDatesCancle} from './api/ProcessingDateFormat'
Vue.prototype.$fromdate = FromDates
Vue.prototype.$FromDatesCancle = FromDatesCancle
//  在原型链中注册，然后再需要引用的页面就可以这样拿到--调用方法：：this.$fromdate()

$有小伙伴评论说main.js里边的内容太多$

所以我就更新一下在需要引用的页面怎么使用，并且前提我已经说了是全局的方法，一个项目中也不会有那么多全局使用的方法，都是某些模块使用的，那就写一个该模块使用的公共方法。总有一些人来抬杠，没得办法。

在需要使用的页面引用,详情请移步vue 接受后台传过来的文件流并下载为excel文件这个方法就是在需要的页面引用的。

结束

到此,这两种方法都可以使用了,终于不用在每个页面引用了,vue的强大,以后还是要多多学习的.有不对的希望小伙伴多多指正.