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

方法一、使用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文件。

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

转载来源https://www.cnblogs.com/liuyishi/p/9459289.html

 实际操作：

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;
    }
}

3、在main.js里全局引用publicFun.js。

//引入公共方法js文件
import publicFun from './publicFun'
//调用公共方法js文件
Vue.use(publicFun);

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

this.getNowDayStr();