【vue3】命令式组件封装，message封装示例；（函数式组件？）

原创

已于 2025-06-23 13:35:37 修改 · 置顶 · 2k 阅读

标签

#javascript #vue.js #前端

收录于

于 2024-02-29 01:25:02 首次发布

仅做代码示例；当然改进的地方还是不少的，仅作为该类组件封装方式的初步启发；
理想大成肯定是想要像 `饿了么` 这些组件库一样。

有的人叫这函数式组件，有的人叫这命令式组件，我个人还是偏向于命令式组件的称呼。因为以vue官方文档里对函数式组件的描述，该组件不符合相关类型描述。
而且这种主要以`关注实现过程为主`的封装风格，感觉叫命令式组件贴切点，欢迎大家提出自身观点！

1、封装 message.vue 消息提示组件；

<template>
  <div :ref="(el) => setRef(el, index)" v-for="(item, index) in showList" :key="item.message + index" class="message"
    :class="[item.type]">
    <span class="messageIcon">∮</span>
    <span>{
  
  { item.message }}</span>
    <span class="closeIcon" @click="closeTarget(index)">×</span>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
const props = defineProps({
  closeAll: Function
})

const emit = defineEmits(['clo