Vue3 Composition API子组件onUpdated事件更新父组件DOM问题

• Vue自定义事件不支持冒泡，仅能在直接引入子组件的标签上监听。你将@emittingChatTabUxState绑定在原生<a>标签上，该标签不会抛出子组件的自定义事件，因此逻辑完全不会触发。
• 你通过<slot>渲染聊天子组件，父组件模板中没有直接书写子组件标签，本身就没有绑定自定义事件的挂载点。
• 现有逻辑用onUpdated触发事件存在严重误触发问题：输入框打字、组件重渲染、滚动等任何DOM更新都会触发事件，无法精准匹配「收到后端新消息」的场景。
• 你用单个字符串存储类名状态，会导致所有标签页共用一个未读标记，只要一个会话有新消息，所有标签都会加红框，不符合多标签独立提示的需求。

1. 调整状态传递逻辑 #

插槽场景下不要强行用自定义事件通信，直接借助你已经在用的provide/inject能力传递状态更新方法，更简单可靠。

父组件修改 #

首先把单值的类名状态改为按会话ID存储的映射表，同时提供标记未读的方法给子组件调用：

// 父组件setup内
// 替换原有的updateChatClassValue，用对象存储每个会话的未读状态
const unreadChatMap = ref({});

// 标记指定会话为未读的方法，直接provide给子组件调用
const markChatUnread = (chatId) => {
  unreadChatMap.value[chatId] = true;
};
provide("markChatUnread", markChatUnread);

// 保留选中标签逻辑，新增监听：切换到对应标签时自动清除未读标记
watch(selectedTitle, (activeChatId) => {
  if (unreadChatMap.value[activeChatId]) {
    unreadChatMap.value[activeChatId] = false;
  }
});

// 原有定时清除逻辑可按需保留，调整为清空映射表即可
const timing = () => {
  setInterval(() => {
    unreadChatMap.value = {};
  }, 2000);
};

修改父组件模板中标签的类名绑定，按当前标签ID匹配未读状态：

<a 
  href="#" 
  role="tab" 
  :class="unreadChatMap[title] ? 'chatUpdated' : ''"
>
  {{ title }}
</a>

删掉原来绑定在<a>上的无效@emittingChatTabUxState监听和对应的updateChatClass方法即可。

2. 子组件修改 #

删掉onUpdated里无脑触发事件的逻辑，改为精准监听消息列表变化，仅在收到非自己发送的新消息、且当前标签未激活时触发未读标记：

// 子组件script内，新增引入inject
import { ref, onMounted, watch, inject } from "vue";

setup(props, { emit }) {
  const message = ref("");
  const chatBody = ref(null);
  // 注入父组件提供的激活标签状态、标记未读方法
  const selectedTitle = inject("selectedTitle");
  const markChatUnread = inject("markChatUnread");

  const scrollChatBodyToEnd = () => {
    if (chatBody.value) {
      chatBody.value.scrollTop = chatBody.value.scrollHeight;
    }
  };

  // 监听消息列表长度变化，仅在新增消息时执行业务逻辑
  watch(
    () => props.chatSession.events.length,
    (newLen, oldLen) => {
      if (newLen <= oldLen) return;
      scrollChatBodyToEnd();
      const latestMessage = props.chatSession.events[newLen - 1];
      // 此处sender字段根据实际业务结构调整，判断为终端用户/后端发送的消息即可
      const isEndUserMessage = latestMessage.sender !== "self";
      const isNotActiveTab = props.chatSession.id !== selectedTitle.value;
      
      if (isEndUserMessage && isNotActiveTab) {
        markChatUnread(props.chatSession.id);
      }
    },
    { deep: true }
  );

  onMounted(() => {
    scrollChatBodyToEnd();
  });

  // 原有sendMessage等其他逻辑保持不变
  // 删掉原有的onUpdated、submitChatTabUxState相关逻辑
}

• 避开插槽场景下自定义事件无法绑定的问题，通信逻辑更直接
• 从根源解决onUpdated导致的误触发问题，仅在真的收到新消息时才提示
• 按会话ID独立存储未读状态，不会出现所有标签同时高亮的问题
• 切换标签自动清除已读标记，交互逻辑更符合常规聊天产品的使用习惯

内容的提问来源于stack exchange，提问作者Lowtrux