vue 全家桶（六）全局注册过滤器filter和全局注册组件

Vue全家桶：优雅地全局注册过滤器与组件

最新推荐文章于 2024-05-27 09:53:40 发布

原创

最新推荐文章于 2024-05-27 09:53:40 发布 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了如何在Vue应用中以更优雅的方式全局注册过滤器和组件。通过在src/assets/js下创建filters.js来定义全局过滤器，并在main.js中导入注册。同样，可以在components文件夹下创建globalComponent.js来集中管理全局组件，然后在main.js中引入，避免在main.js中直接大量编写注册代码。

虽然在main.js中使用 Vue.filter()和Vue.component() 就可以实现全局注册的问题，但是注册全局组件是挂载在Vue对象下，也就是全写在main.js中咯，那会不会多了点，本文主要是提供一个小优雅的方案咯。

一. 全局注册过滤器

1. src>assets>js 下创建一个filters.js文件，写下我们全局的过滤器，然后将其抛出。

//事件过滤器
let formatDate = function (date, fmt){
  if(typeof(date)!='Date'){
    date = new Date(date);
  }
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  let o = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds()
  };
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      let str = o[k] + '';
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
    }
  }
  return fmt;
};

function padLeftZero(str) {
  return ('00' + str).substr(str.length);
}

//

最低0.47元/天解锁文章