封装一个vue3的公共组件

### 创建和使用 Vue3 公共组件的最佳实践 #### 一、定义公共组件 为了提高代码的重用性和维护性，创建一个独立于具体页面逻辑之外的公共组件是非常必要的。假设要构建一个通用的消息提示框 `MessageAlert`。 ```vue <!-- MessageAlert.vue --> <template> <div v-if="visible" class="message-alert"> {{ message }} </div> </template> <script setup lang="ts"> import { ref } from &#39;vue&#39;; const props = defineProps({ message: { type: String, required: true } }); // 控制消息框显示隐藏的状态 let visible = ref(false); defineExpose({ setVisible }); function setVisible(flag:boolean){ visible.value = flag; } </script> <style scoped> .message-alert{ /* 添加样式 */ } </style> ``` 这段代码展示了如何定义一个带有简单属性绑定以及内部状态管理的基础公共组件[^1]。 #### 二、全局注册公共组件 为了让整个应用程序都能访问该组件而不必每次都手动导入并局部声明，可以通过插件的形式将其作为全局组件来注册： ```typescript // plugins/messageAlertPlugin.ts import { App, Plugin } from "vue"; import MessageAlert from "@/components/MessageAlert.vue"; export default ((app:App<Element>)=>{ app.component("MessageAlert", MessageAlert); }) as Plugin; // main.ts 中应用此插件 import messageAlertPlugin from &#39;./plugins/messageAlertPlugin&#39;; createApp(App).use(messageAlertPlugin).mount(&#39;#app&#39;); ``` 这样做的好处在于可以在任何地方直接使用 `<MessageAlert>` 而无需额外配置[^3]。 #### 三、按需懒加载公共组件 当项目规模较大时，考虑性能优化问题，可以采用异步加载的方式来延迟加载不常用的公共组件: ```javascript const AsyncComponent = () => import(/* webpackChunkName:"group-messagealert" */ &#39;@/components/MessageAlert.vue&#39;) ``` 这种方式不仅减少了初始包体积，还能让用户体验更加流畅。 #### 四、组合式API增强公共组件的功能性 借助Vue3的新特性——组合式API，能够更好地组织复杂业务场景下的逻辑关系。比如针对上述提到的消息提醒功能，如果想要增加更多交互行为（如定时关闭），就可以利用setup语法糖配合ref/reactive等响应式工具轻松实现[^4]: ```typescript import { onMounted, nextTick, watchEffect } from &#39;vue&#39; onMounted(() => { let timer:any|null=null; const startTimer=()=>{ clearTimeout(timer); timer=setTimeout(()=>{ setVisible(false); },3000); // 自动消失时间设置为3秒 } watchEffect((onInvalidate)=>{ if(visible.value===true){ nextTick(startTimer); onInvalidate(()=>clearTimeout(timer)); } }); }); ``` 以上就是在Vue3框架下创建高效灵活的公共组件的一些基本思路和技术要点。