《vue3封装公共方法》

一、解决方案

在Vue3项目开发中，封装公共方法可以提高代码的复用性、可维护性和项目的扩展性。通过将一些常用的功能逻辑抽离出来封装成公共方法，不同组件就可以方便地调用这些方法，而无需重复编写相同的代码。我们可以通过创建一个单独的js文件来存放公共方法，或者利用Vue3的组合式API（Composition API）等方式来进行封装。

二、基于普通js文件封装

我们可以创建一个名为commonUtils.js的文件。例如，有一个格式化日期的公共方法。

javascript
// commonUtils.js
export function formatDate(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
};
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + '';
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : ('00' + str).substr(str.length));
}
}
return fmt;
}


然后在组件中使用：

javascript

  <div>{{formattedDate}}</div>
</p>


import { ref, onMounted } from 'vue';
import { formatDate } from './commonUtils';

export default {
    setup() {
        const formattedDate = ref('');
        const now = new Date();
        onMounted(() => {
            formattedDate.value = formatDate(now, 'yyyy - MM - dd hh:mm:ss');
        });
        return {
            formattedDate
        };
    }
};


<p>

三、利用组合式API封装

（一）定义工具函数

javascript
// useUtils.js
import { ref } from 'vue';</p>

<p>export function useFormatDate() {
    const formatDate = (date, fmt) => {
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
        let o = {
            'M+': date.getMonth() + 1,
            'd+': date.getDate(),
            'h+': date.getHours(),
            'm+': date.getMinutes(),
            's+': date.getSeconds()
        };
        for (let k in o) {
            if (new RegExp(<code>(${k})).test(fmt)) {
                let str = o[k] + '';
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : ('00' + str).substr(str.length));
            }
        }
        return fmt;
    };


return {
    formatDate
};

}


（二）组件中使用
javascript

  <div>{{formattedDate}}</div>
</p>


import { ref, onMounted } from 'vue';
import { useFormatDate } from './useUtils';

export default {
    setup() {
        const { formatDate } = useFormatDate();
        const formattedDate = ref('');
        const now = new Date();
        onMounted(() => {
            formattedDate.value = formatDate(now, 'yyyy - MM - dd hh:mm:ss');
        });
        return {
            formattedDate
        };
    }
};


<p>
除了上述两种方式，在实际项目中还可以根据需求考虑使用Vuex来管理一些全局的状态和相关的方法，对于一些需要跨多个组件共享且较为复杂的方法和数据逻辑，Vuex会是一个不错的选择。但如果是简单的公共方法，前两种方式已经足够满足需求并且更加简洁高效。


相关推荐：

vue3封装全局方法 Vue3封装全局方法 在Vue3项目开发中，当有一些公共的方法需要在多个组件中使用时，将这些方法封装成全局方法 […]...
php中如何使用正则表达式来替换或者过滤内容 php中如何使用正则表达式来替换或者过滤内容   当通过php代码实现一些功能或者通过php代码采集 […]...
vue3引入公共方法 vue3引入公共方法 在Vue 3项目中，当多个组件需要使用相同的逻辑或功能时，将这些代码提取成公共方法是一个 […]...
javascript函数常用、javascript函数大全 JavaScript函数常用、JavaScript函数大全 在Web开发中，JavaScript是不可或缺的前 […]...
vue获取时间、vue获取时间日期代码 Vue是一款流行的JavaScript框架，可以用于开发现代化的Web应用程序。在Vue中，我们可以轻松地获取 […]...
php 转换为字符串_PHP字符串转换技巧 php 转换为字符串_PHP字符串转换技巧 PHP是一种广泛使用的开源脚本语言，主要用于Web开发。在PHP中 […]...
vue中引入js_vue中引入js中的数据 vue中引入js_vue中引入js中的数据 在Vue中，我们可以通过多种方式引入外部的JavaScript文件 […]...
vue3添加公共方法与使用 《vue3添加公共方法与使用》 在Vue3项目开发中，我们常常会遇到一些需要在多个组件中复用的方法。为了提高代 […]...
vue3 获取子组件的方法 vue3 获取子组件的方法 在 Vue 3 中，获取子组件实例是一个常见的需求，尤其是在父组件需要调用子组件的 […]...
vue3获取url链接方法 vue3获取url链接方法 在Vue 3项目中，获取URL链接是一个常见的需求。无论是为了从URL中提取参数、 […]...