《vue3添加公共方法与使用》

在Vue3项目开发中，我们常常会遇到一些需要在多个组件中复用的方法。为了提高代码的可维护性和复用性，可以将这些公共方法进行集中管理。解决方案主要有两种思路：一种是通过创建一个单独的js文件来存放公共方法并引入使用；另一种是利用Vue3的插件机制。

一、创建单独js文件存放公共方法

我们可以新建一个名为commonMethods.js的文件，在其中定义公共方法。例如：

javascript
// commonMethods.js
export function formatDate(date) {
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
return `${year}-${month}-${day}`;
}


然后在需要使用的组件中引入并使用：

javascript

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


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

export default {
  setup() {
    const formattedDate = ref('');

    onMounted(() => {
      const currentDate = new Date();
      formattedDate.value = formatDate(currentDate);
    });

    return {
      formattedDate
    };
  }
};


<p>

二、利用Vue3插件机制

创建一个插件文件，比如myPlugin.js：

javascript
// myPlugin.js
export default {
install(app) {
app.config.globalProperties.$globalMethod = function () {
console.log('这是全局公共方法');
};
}
};


然后在main.js中使用该插件：

javascript
import { createApp } from 'vue';
import App from './App.vue';
import myPlugin from './myPlugin';</p>

<p>const app = createApp(App);
app.use(myPlugin);
app.mount('#app');

这样在组件中就可以直接使用这个公共方法了：

javascript

  <div>
    <button>调用全局方法</button>
  </div>
</p>


export default {
  methods: {
    useGlobalMethod() {
      this.$globalMethod();
    }
  }
};


<p>

这两种方式都能很好地实现公共方法的添加与使用，可以根据项目的实际情况和需求选择合适的方式。如果是简单的几个公共方法，种方式更为简洁；如果项目较大且公共方法较多，第二种插件机制可能更有利于管理和维护。