“携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情”

Vue2项目开发技巧总结---持续更新

改良注册全局组件的方式

新建components文件夹

1 各全局组件如全局工具栏组件components/PageTools/index.vue

// 全局组件业务
<template>
  <div class="page-tools">
    <el-card>
      <el-row type="flex" justify="space-between">
        <el-col>
          <div v-if="showBefore" class="before">
            <slot name="before" />
          </div>
        </el-col>
        <el-col>
          <el-row type="flex" justify="end">
            <slot name="after" />
          </el-row>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

2 在components/index.js 统一引入全局组件并 export 出去

❗注意写法

import PageTools from './PageTools/index.vue'
import Lang from './lang/index.vue'

export default {
  install(Vue) {
    Vue.component('PageTools', PageTools)
    Vue.component('Lang', Lang)
  }
}

3 在 main.js中注册组件

import Components from './components/index'
Vue.use(Components)

为什么插件可以直接通过Vue.use方法来注册组件

是因为插件内容实现了一个install函数

而且，当我们用Vue.use方法来注册组件的时候，这个方法会自动调用插件内提供的install函数

并且会给install传递Vue，这样install函数内部就可以通过Vue.component来注册组件了

多全局过滤器引入写法

过滤器

作用:

提供一个全局方法，处理数据，并把处理后的数据返回给使用者

使用语法：

变量 | 过滤器名字

注意点：

过滤器只能使用在插值表达式或者v-bind动态属性中

多个全局过滤器使用步骤：

定义

创建 filters/index.js文件（存放所有全局过滤器）

export const formatTime = (time,option){
    // 格式化时间业务
}
export const checkPassword = (rule,value,callback){
    // 校验密码业务
    if (!value) {
    return callback(new Error('密码不能为空'))
  } else if (value.length < 6) {
    callback(new Error('请至少输入 6 个字符。请不要使用容易被猜到的密码'))
  } else {
    callback()
  }
}

全局注册

import * as obj from '@/filters/index'
// 表示通过*导入所有的函数，并且通过as关键词对*进行重命名

for(const key in obj){
	Vue.filter(key,obj[key])
}

单个全局过滤器注册语法

Vue.filter('过滤器的名字', (val) => {将来使用该过滤器时传入的值}