Vue SSR 项目 Nuxt.js 框架之《如何注册全局方法、指令、过滤器、组件》

# 前言

全局性的东西在项目开发中是经常用到的，在nuxt中如何定义全局方法、指令、组件及过滤器的呢？

# 全局方法

首先在plugins文件下创建一个mixins.js文件，用来注册全局性的方法及指令等, 内容如下：

import Vue from 'vue'

// 定义全局方法
let testFn = () => {
    console.log('我是测试的全局方法');
}
// 挂载到 vue 原型中
// 注意：服务端内部钩子不能使用
Vue.prototype.$testFn = testFn ;

配置nuxt.config.js文件

export defult{
    plugins: ['@/plugins/mixins']
}

重启后，就可以在页面里调用刚刚定义的全局方法了

# 全局过滤器

在assets的js文件夹下创建filters.js文件，用于声明我们的全局过滤器，内容如下：

// 格式化时间
export const dateFt = date => {
    if (!date) return 'e';
    const dt = new Date(date);
    let y = dt.getFullYear(),
        m = dt.getMonth() + 1,
        d = dt.getDate(),
        h = dt.getHours(),
        mm = dt.getMinutes(),
        ss = dt.getSeconds();

    m = String(m).padStart(2, '0')
    d = String(d).padStart(2, '0')
    h = String(h).padStart(2, '0')
    mm = String(mm).padStart(2, '0')
    ss = String(ss).padStart(2, '0')

    return y + '-' + m + '-' + d + ' ' + h + ':' + mm + ':' + ss;
}

在plugins下的mixins文件里将过滤器注册到全局，如下

import Vue from 'vue'

// 定义全局方法
let testFn = () => {
    console.log('我是测试的全局方法');
};
// 挂载到 vue 原型中
// 注意：服务端内部钩子不能使用
Vue.prototype.$testFn = testFn;

// 注册全局过滤器
// 这里是一次性获得批量导出的所有对象方法
import * as filtersList from '@/assets/js/filters'
// 循环将每个过滤器注册到全局
Object.keys(filtersList).forEach(key => Vue.filter(key, filtersList[key]))

如此就可以在所有的页面用全局过滤器了~

# 全局指令

在assets的js文件夹下创建directives.js文件，用于声明我们的全局过滤器，内容如下：

// 全局指令 1
export const direc1 = {
    // 当指令绑定到元素上的时调用
    bind(el, binding, vnode) {
        console.log('我是指令1，绑定时调用了')
    }
};

// 全局指令 2
export const direc2 = {
    // 元素插入到 DOM 时调用
    inserted(el, binding, vnode) {
        console.log('我是指令2，插入时调用了')
    },
    // 组件更新时调用
    componentUpdated() {
        console.log('我是指令2，更新时调用了')
    }
}

// 指令调用时接收的四个参数分别是：
// el： 指令所绑定的元素， 可以用来直接操作 DOM。
// binding： 一个对象， 包含以下属性：
//      name： 指令名， 不包括 v - 前缀。
//      value： 指令的绑定值， 例如： v - my - directive = "1 + 1" 中， 绑定值为 2。
//      oldValue： 指令绑定的前一个值， 仅在 update 和 componentUpdated 钩子中可用。 无论值是否改变都可用。
//      expression： 字符串形式的指令表达式。 例如 v - my - directive = "1 + 1"中， 表达式为 "1 + 1"。
//      arg： 传给指令的参数， 可选。 例如 v - my - directive: foo 中， 参数为 "foo"。
//      modifiers： 一个包含修饰符的对象。 例如： v - my - directive.foo.bar 中， 修饰符对象为 { foo: true, bar: true }。
// vnode： Vue 编译生成的虚拟节点。。
// oldVnode： 上一个虚拟节点， 仅在 update 和 componentUpdated 钩子中可用。

在plugins下的mixins文件里将指令注册到全局，如下

import Vue from 'vue'

// 定义全局方法
let testFn = () => {
    console.log('我是测试的全局方法');
};
// 挂载到 vue 原型中
// 注意：服务端内部钩子不能使用
Vue.prototype.$testFn = testFn;

// 注册全局指令
import * as directivesList from '@/assets/js/directives'
// 循环将每个指令注册到全局
Object.keys(directivesList).forEach(key => Vue.directive(key, directivesList[key]))

如此就可以在所有的页面用全局指令了~

全局组件

在components文件夹下创建ts-button.vue测试全局组件，内容如下：