Skip to content

[vue] 怎么给vue定义全局的方法? #556

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

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

Activity

zyronon

zyronon commented on Jul 2, 2019

@zyronon

我知道的两种方式:

  • 第一种:挂载到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

jacob-lcs commented on Jul 23, 2019

@jacob-lcs

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

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

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

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

greenaaaa commented on Jul 31, 2019

@greenaaaa

prototype

brady0316

brady0316 commented on Aug 7, 2019

@brady0316

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

wush12

wush12 commented on Nov 5, 2019

@wush12

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

liuxiaoyang1

liuxiaoyang1 commented on Nov 19, 2019

@liuxiaoyang1

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

molifei

molifei commented on Dec 4, 2019

@molifei

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

cherry728

cherry728 commented on Jun 15, 2020

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

Lzp0225 commented on Jan 15, 2021

@Lzp0225

Vue.prototype Vue.mixin

crush2020

crush2020 commented on Jan 22, 2021

@crush2020

挂载到vue的原型上,就可以在全局使用

MakeBetterMe

MakeBetterMe commented on Sep 29, 2021

@MakeBetterMe

我知道的两种方式:

  • 第一种:挂载到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
    }
}

这个方式很优雅

HNHED

HNHED commented on Oct 3, 2021

@HNHED

挂载到原型上:Vue.prototype
mixin

Tracymcgrady946

Tracymcgrady946 commented on Sep 7, 2023

@Tracymcgrady946

除了使用 Vue.prototype 定义全局方法外,Vue 还提供了其他几种方式来扩展全局功能和方法:

使用插件(Plugins):Vue 插件是一个可复用的 Vue 实例扩展,可以在应用程序中全局注册。插件可以添加全局方法、指令、过滤器,或是修改 Vue 的原型,以及向组件注入混入等。你可以使用 Vue.use() 方法来安装插件。详细使用方法可参考 Vue 官方文档中的 "插件 (Plugins)" 部分。

使用混入(Mixins):混入是一种将组件中的选项合并到 Vue 实例或其他组件中的一种方式。你可以创建一个混入对象,包含你希望混入的选项(如方法、计算属性、生命周期钩子等),然后通过 mixins 选项将其应用到 Vue 实例或组件中。混入的方法会被合并到组件中,从而实现全局的方法扩展。详细使用方法可参考 Vue 官方文档中的 "混入 (Mixins)" 部分。

使用全局 mixin:Vue 允许通过调用 Vue.mixin() 方法定义全局混入,它会影响所有之后创建的 Vue 实例。通过全局混入,你可以添加全局的方法、指令、过滤器等到每个 Vue 实例中。需要注意的是,全局混入可能会导致命名冲突或意外覆盖现有的选项。因此,使用时需要小心并确保了解其影响。详细使用方法可参考 Vue 官方文档中的 "全局混入 (Global Mixin)" 部分。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@cherry728@brady0316@MakeBetterMe@zyronon

        Issue actions

          [vue] 怎么给vue定义全局的方法? · Issue #556 · haizlin/fe-interview