1.如何给vue定义全局方法

实现方式：

一、将方法挂载到Vue.prototype上面

缺点：调用该方法得时候没有提示

//grobal.js
const RandomString =(encode = 36 ,number = -8) =>{
      return Math.random() //生成随机数，eg：0.1234
           .toString(encode) //转化成36进制 ：“0，4fy”
           .slice(number)    
},

export default{
     RandomString

}

　　

//在项目的入口文件里配置
import Vue from 'vue'
import global from "@/global"
Object.key(global).forEach((key)=>{
    Vue.prototype["$global"+key] =global[key]
})

　　

//挂载之后，在需要引入全局变量的模块处（App.vue）,不需要再导入全局变量模块，而是直接用this就可以引用了如下：
export default{

    mounted(){

          this.$globalRandomString()
    }  
}    

　　二、利用全局混入mixin

优点：因为mixin里面的methods会和创建的每个单文件组件合并。这样做的优点是调用这个方法的时候有提示

import moment from 'moment'
const mixin ={
  methods:{
       minRandomString(encode = 36 ,number =-8){
           return Math.random().toString(encode).slice(number)     
      }
}

　　

//在项目入口的mian.js里配置
import Vue from "vue"
import mixin from "@/mixin"
Vue.mixin(mixin)

　　

 

//使用文件
export default{
     mounted(){

        this.minRandomString()
     }
   
}

　　

　三、使用Plugin

Vue.use的实现并没有实现挂载的功能，只是触发了插件的install方法，本质上使用了Vue.prototype

//plugin.js

function  minRandomString(encode = 36 ,number =-8){
            return Math.random().toString(encode).slice(number) 
}
     const plugin ={
         //install 是默认的方法
        //当外界在use这个组件或者函数的时候，就会调用本身的install方法，同时传一个Vue 
        这个类的参数
       install: function(Vue)
         Vue.prototype.$pluginRandomString =randomString

     }

export default plugin

    

　　

//在项目入口的main.js里配置
import Vue from 'vue'
import plugin from "@/plugin"
Vue.use(plugin)

　　

export default{

    mounted(){
     this.$pluginRandomString()

    }

}

　样例：使用时间选择器的例子  

datePicker.js 文件需要的留言  

import datePicker from './assets/js/datePicker.js'
Vue.use(datePicker)

初始化时间选择器

mounted(){
        this.datePicker();
     
    },

页面具体使用：

  datePicker(){
           var calendar = new datePicker();
            calendar.init({
                trigger: "#demo" /*按钮选择器，用于触发弹出插件*/,
                type:
                "date" /*模式：date日期；datetime日期时间；time时间；ym年月；year:年*/,
                minDate: "1900-1-1" /*最小日期*/,
                maxDate: "2100-12-31" /*最大日期*/,
                onSubmit: function() {
                /*确认时触发事件*/
                var theSelectData = calendar.value;
                },
                onClose: function() {
                /*取消时触发事件*/
                }
            }); 
        },

 

　四、任意vue文件中写全局函数

//创建全局方法
this.$root.$on('test',function(){
   console.log("test")
})
//销毁全局方法
this.$root.$off("test')
//调用全局方法
this.$root.$emit("test")