#健康快乐工作#每一天都是新的一天

项目开发中常用的Vue小技巧--全局注册过滤器,全局组件注册,不同路由的组件复用

一、前言

vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美地进行开发。下面有一些我在日常开发的时候用到的小技巧


二、全局注册过滤器

1、正常写法

之前我是这么写的过滤器的,在具体页面中。

 filters: {
      roleFilter(val) {
        //处理逻辑
        if (val === 1) return '管理员'
        if (val === 2) return '办公室人员'
        if (val === 3) return '监督人员'
        if (val === 4) return '普通用户'
        else return '-'
      }
    },

但是我们做项目来说,大部分的过滤器是要全局使用的,不会每每用到就在组件里面去写,抽成全局的会更好些。官方文档:https://cn.vuejs.org/v2/guide/filters.html

/src/main.js

/*filter*/
Vue.filter('roleFilter',function (val) {
  if (val === 1) return '管理员'
  if (val === 2) return '办公室人员'
  if (val === 3) return '监督人员'
  if (val === 4) return '普通用户'
  else return '-'
})

这样在页面上就可以直接使用`roleFilter`这个过滤器。

<el-table-column
        label="角色"
        width="100">
        <template slot-scope="scope">
          {{scope.row.authority | roleFilter}}
        </template>
</el-table-column>

如果项目用到很多的过滤器,都写在这里main.js中,不美观不直接,因此可以抽出成单独文件。

2、优化写法

我们可以抽出到独立文件,然后使用Object.keys在main.js入口统一注册

/src/utils/filters.js

/*人员角色 转换器*/
let filterTeam = function(val){
  if (val === 1) return '管理员'
  if (val === 2) return '办公室人员'
  if (val === 3) return '监督人员'
  if (val === 4) return '普通用户'
  else return '-'
}

export { filterTeam }

/src/main.js

/*引入全局过滤器*/
import * as fliterCommon from '../src/utils/filters'
Object.keys(fliterCommon).forEach(key => Vue.filter(key, fliterCommon[key]))

然后在其他的.vue 文件中就可愉快地使用这些我们定义好的全局过滤器了

 <el-table-column
        label="角色"
        width="100">
        <template slot-scope="scope">
          {{scope.row.authority | filterTeam}}
        </template>
</el-table-column>


三、全局组件注册

1、一般情况


写了一堆基础UI组件,然后每次我们需要使用这些组件的时候,都得先import,然后声明components,很繁琐,这里可以使用统一注册的形式


2、优化写法

我们需要借助一下神器webpack,使用 require.context() 方法来创建自己的模块上下文,从而实现自动动态require组件。这个方法需要3个参数:要搜索的文件夹目录、是否还应该搜索它的子目录、以及一个匹配文件的正则表达式。我们在components文件夹添加一个叫 componentRegister .js的文件,在这个文件里借助webpack动态将需要的基础组件统统打包进来。

/src/components/ componentRegister .js


文件结构


这里对组件名做了判断,如果是index的话就取组件中的name属性处理后作为注册组件名, 所以最后注册的组件为:multi-conditionbasic-table最后我们在main.js中import 'components/ componentRegister .js',然后我们就可以随时随地使用这些基础组件,无需手动引入了~


四、不同路由的组件复用

1、一般使用

当某个场景中vue-router从/post-page/a,跳转到/post-page/b。然后我们惊人的发现,页面跳转后数据竟然没更新?!原因是vue-router"智能地"发现这是同一个组件,然后它就决定要复用这个组件,所以你在created函数里写的方法压根就没执行。通常的解决方案是监听$route的变化来初始化数据,如下:



2、优化方法

为了实现这样的效果可以给 router-view添加一个不同的key,这样即使是公用组件,只要url变化了,就一定会重新创建这个组件。

<router-view :key = "$route.fullpath"></router-view>

还可以在其后加 ++newDate()时间戳,保证独一无二。

如果组件被放在 <keep-alive>中的话,可以把获取新数据的方法放在activated钩子,代替原来在created、mounted钩子中获取数据的任务。


感谢你的阅读,本文由 sau交流学习社区 版权所有。
如若转载,请注明出处:sau交流学习社区-power by saucxs(程新松)(/page/721.html)
交流咨询
    官方QQ群
    群号663940201,欢迎加入!
    sau交流学习社区交流群

图文推荐

saucxs聊天机器人
saucxs
hi ,欢迎来到sau交流学习社区,欢迎与我聊天,问我问题哦!