Fe-interview: [vue] 怎么给vue定义全局的方法？

[haizhilin2013]

[vue] 怎么给vue定义全局的方法？

[ttentau]

我知道的两种方式：

• 第一种：挂载到Vue的prototype上。把全局方法写到一个文件里面，然后for循环挂载到Vue的prototype上，缺点是调用这个方法的时候没有提示

 Object.keys(tools).forEach(key => {
      Vue.prototype[key] = tools[key]
 })

• 第二种：利用全局混入mixin，因为mixin里面的methods会和创建的每个单文件组件合并。这样做的优点是调用这个方法的时候有提示

Vue.mixin(mixin)
new Vue({
    store,
    router,
    render: h => h(App),
}).$mount('#app')

import tools from "./tools"
import filters from "./filters"
import Config from '../config'
import CONSTANT from './const_var'

export default {
    data() {
        return {
            CONFIG: Config,
            CONSTANT: CONSTANT
        }
    },
    methods: {
        // //将tools里面的方法挂载到vue上,以方便调用，直接this.$xxx方法名就可以了
        // Object.keys(tools).forEach(key => {
        //     Vue.prototype[key] = tools[key]
        // })
        //将tools里面的方法用对象展开符混入到mixin上,以方便调用，直接this.$xxx方法名就可以了
        ...tools
    },
    filters: {
        // //将filter里面的方法添加了vue的筛选器上
        // Object.keys(filters).forEach(key => {
        //     Vue.filter(key, filters[key])
        // })
        ...filters
    }
}

[jacob-lcs]

我知道一种方法，就是在任意vue文件中写全局函数

// 创建全局方法
this.$root.$on('test', function(){
    console.log('test');
})

// 销毁全局方法
this.$root.$off('test');

// 调用全局方法
this.$root.$emit('test');

[greenaaaa]

prototype

[brady0316]

1、通过prototype，这个非常方便。Vue.prototype[method]=method;
2、通过插件Vue.use(plugin)；
3、通过mixin，Vue.mixin(mixins);

[wush12]

1.挂载到prototype上,上面说得vue.use的实现没有挂载的功能，只是触发了插件的install方法，本质还是使用了vue.prototype。
2.vue.mixin

[liuxiaoyang1]

方法一：给vue原型加方法：vue.protype.get=function(){}

[molifei]

1.挂载在prototype上，Vue.prototype
2.Vue.mixin

[cherry728]

1. Vue.prototype.xxx
2. Vue.mixin，在某个钩子函数里面可以拿到vue实例

[Lzp0225]

Vue.prototype Vue.mixin