Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
haizhilin2013 opened this issue Jul 2, 2019 · 13 comments
Open

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

haizhilin2013 opened this issue Jul 2, 2019 · 13 comments
Labels
vue vue

Comments

@haizhilin2013
Copy link
Collaborator

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

@haizhilin2013 haizhilin2013 added the vue vue label Jul 2, 2019
@zyronon
Copy link

zyronon commented Jul 2, 2019

我知道的两种方式:

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

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

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

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

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

@greenaaaa
Copy link

prototype

@brady0316
Copy link

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

@wush12
Copy link

wush12 commented Nov 5, 2019

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

@liuxiaoyang1
Copy link

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

@molifei
Copy link

molifei commented Dec 4, 2019

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

@cherry728
Copy link

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

@Lzp0225
Copy link

Lzp0225 commented Jan 15, 2021

Vue.prototype Vue.mixin

@crush2020
Copy link

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

@MakeBetterMe
Copy link

我知道的两种方式:

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

HNHED commented Oct 3, 2021

挂载到原型上:Vue.prototype
mixin

@Tracymcgrady946
Copy link

除了使用 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
Labels
vue vue
Projects
None yet
Development

No branches or pull requests