在Vuejs中定义公共函数的3种方法

blog.csdn.net/qq\_3606933…

方法一、使用Vue中mixin

https://juejin.cn/post/6844903908398071816

具体用法：

1、定义公共的mixin文件：如mixin.vue。

<template>
 
</template>
 
<script>
 
    export default {
        name: 'mixins-test-main',
        components: {},
        props: {},
        data () {
            return {
                mixinData: 'mixin中的变量'
            }
        },
        methods: {
            mixinFunction () {
                return '我是mixins里面的公共方法'
            },
        },
        mounted () {
        },
        computed: {}
    }
</script>
 
<style scoped>
</style>

2、在你页面内调用：需要import这个mixin文件 ，然后通过mixins:['文件名']来使用就可以了。

<template>
    <div>
        <div @click="handleMixin">调用mixin方法</div>
    </div>
</template>
 
<script>
    import MixinItem from './mixin'
 
    export default {
        name: 'mixin-test-comp',
        props: {},
        mixins: [MixinItem],
        components: {},
        data () {
            return {}
        },
        methods: {
            handleMixin () {
                console.log('mixin-data=========', this.mixinData)
                let mixfun = this.mixinFunction()
                console.log('mixin-fun====>>>', mixfun)
            },
        },
        mounted () {
        },
        computed: {}
    }
</script>
 
<style scoped>
</style>

方法二、在main.js里直接写函数。

方法三、创建公共函数的js文件，然后在main.js里引入该js文件。

方法二与方法三其实是一个意思。

www.cnblogs.com/liuyishi/p/…

实际操作：

1、main.js的同级新建一个js文件：publicFun.js。放在同级是为了方便引用。

2、publicFun.js 封装函数。

exports.install = function(Vue,options){
    Vue.prototype.getNowDayStr = function(){//获取当前日期字符串
        var dd=new Date();
        dd.setDate(dd.getDate());
        var y=dd.getFullYear();
        var m=(dd.getMonth()+1)<10?"0"+(dd.getMonth()+1):(dd.getMonth()+1);
        var d=dd.getDate()<10?"0"+dd.getDate():dd.getDate();
        return y+"-"+m+"-"+d;
    }
}

4、在任意一个vue文件里就可以调用该函数了。

this.getNowDayStr();