使用vue3和js封装一个公用的组件

在 Vue3 中，我们可以使用 Composition API 来封装一个通用组件。Composition API 提供了 `setup` 函数，允许我们在组件内部组织业务逻辑。以下是创建一个通用组件的基本步骤：

1. 首先，导入必要的依赖，如 Vue 和一些你可能需要的功能库，如 vuex 或 axios。

import { ref, computed } from 'vue';
import store from './store';

2. 定义组件的状态和方法。例如，我们可以创建一个名为 `message` 的响应式变量来存储数据，并提供一个函数 `sendMessage` 发送数据到服务器。

export default function GenericComponent() {
  const message = ref('');
  const sendMessage = async () => {
    await store.dispatch('sendMessage', message.value);
    // 清空输入框
    message.value = '';
  };

  // 其他可能使用的计算属性或方法...
}

3. 然后，在模板中使用这个组件，并处理用户的交互。例如，监听输入事件。

<template>
  <div>
    <input v-model="message" @keyup.enter="sendMessage">
    <button @click="sendMessage">发送</button>
  </div>
</template>

4. 如果有其他公共的行为或状态需要复用，可以考虑将它们提取到单独的模块或混入对象（mixins）中。

记得在主应用文件里引入并注册这个组件：

import GenericComponent from '@/components/GenericComponent.vue';

// 注册组件
const app = createApp(App);
app.component('GenericComponent', GenericComponent);
app.mount('#app');