简述Vue.use()的用法

198 阅读1分钟

vue.use() 语法 vue安装的组件类型必须为Function或者是Object

如果是个对象,必须提供install方法

如果是一个函数,会被直接当作install函数执行

install函数接受参数,默认第一个参数为Vue,其后参数为注册组件时传入的arguments

export const getTime =   val=>  {
             let mytime = new Date(val);
             // ☞ 根据当前系统时间得到年,月,日,时,分,秒
             // 年
             let year = mytime.getFullYear();
             // 月份: 月份是从0开始的
             let month = mytime.getMonth() + 1;
               month =  month < 10? '0' +month : month;
             // 日期:
             let dt = mytime.getDate();
                dt = dt < 10? '0'+dt : dt;
             // 时:
             let h = mytime.getHours();
                h = h < 10? '0'+h : h;
             // 分:
             let ms = mytime.getMinutes();
                ms = ms < 10?  '0'+ms: ms;
             // 秒:
             let s = mytime.getSeconds();
                s = s < 10 ? '0'+s : s;
             let timeStr = `${year}-${month}-${dt} ${h}:${ms}:${s}`;
             return timeStr;
}


export default {
  install: function (Vue) {
    // console.log('install', val === Vue)
    // 补充定义全局过滤器
    // Vue.filter('relativeTime', (val)=>{})

    Vue.filter('getTime', getTime)
  }
}

在main.js中导入这个插件,并使用(Vue.use())

import getTi from './utils/dateFormate.js'
Vue.use(getTi)

注意:使用时 应使用getTime而不是getTi

main.js中

// 使用插件
const MyPlugin = {
  install(Vue) {
    console.log('插件注册,调用install,传入的参数是', Vue)
    // 在Vue的构造器的原型上添加这个功能
    Vue.prototype.$bus = () => { console.log('快乐的开车') }
    // 添加全局过滤器
  }
}
Vue.use(MyPlugin)

在.vue文件中使用时直接调用

this.$bus()  //即可