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

1、通过prototype,这个非常方便。Vue.prototype[method]=method;
2、通过插件Vue.use(plugin);
3、通过mixin,Vue.mixin(mixins);
第一种:挂载到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
    }
}

ps:vue的mixin的使用

混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。

以上是官网的定义,mixin的作用是多个组件可以共享数据和方法,在使用mixin的组件中引入后,mixin中的方法和属性也就并入到该组件中,可以直接使用,在已有的组件数据和方法进行了扩充。引入mixin分全局引用和局部引用。

// 定义一个mixin.js
let MIXIN = {
   data() {
       return {
           name: 'mixin'
       }
   },
   created() {
       console.log('mixin...', this.name);
   },
   mounted() {},
   methods: {}
};
export default MIXIN;
//全局引用
import mixin from './mixin'
Vue.mixin(mixin)

//在vue文件中引用
import '@/mixin'; // 引入mixin文件
export default {
   mixins: [mixin]
}
暂无评论

请到【后台 - 用户 - 我的个人资料】中填写个人说明。

发表评论