Vue Composition Api 渲染功能同步发射不起作用

问题描述

我想重构 this 教程中有关渲染函数的代码以使用 Composition API。除了 onClick 函数中的 context.emit("update:activeTabId",tab.props.tabId); 行外，一切正常。控制台记录 tab.props.tabId 显示 onClick 函数正常工作并正确读取 tabId，但 update:activeTabId 不会更新 activeTabId 值。是否有另一种方式在 Composition API 中使用同步修饰符发出事件，还是我做错了什么？

这是我的代码：

---- App.vue ----

<template>
<!-- eslint-disable-next-line -->
  <tab-container v-model:activeTabId="activeTabId">
    <tab tabId="1">Tab #1</tab>
    <tab tabId="2">Tab #2</tab>
    <tab tabId="3">Tab #3</tab>

    <tab-content tabId="1">Content #1</tab-content>
    <tab-content tabId="2">Content #2</tab-content>
    <tab-content tabId="3">Content #3</tab-content>
  </tab-container>
</template>

<script>
import {ref} from 'vue'
import {Tab,TabContent,TabContainer} from './components/tabs.js';

export default {
  components: {
    Tab,TabContainer
  },setup() {
    const activeTabId = ref('1');

    return {
      activeTabId,};
  },};
</script>

--- tabs.js ---

import { h } from "vue";

export const TabContainer = {
  props: {
    activeTabId: {
      type: String,required: true,},emits: ['update:activeTabId'],setup(props,context) {
    const $slots = context.slots.default();
    const tabs = $slots
      .filter((x) => x.type === Tab)
      .map((tab) =>
        h(tab,{
          class: {
            tab: true,active: props.activeTabId === tab.props.tabId,onClick: () => {
            console.log(tab.props.tabId)
            context.emit("update:activeTabId",tab.props.tabId);
          },})
      );

    const content = $slots.find(
      (slot) =>
        slot.props.tabId === props.activeTabId && slot.type === TabContent
    );

    return () => [
      h(() => h("div",{ class: "tabs" },tabs)),h(() => h("div",content))
    ];
  },};

const tabItem = (content) => ({
  ...content,props: {
    tabId: {
      type: String,setup(_,context) {
    return () => h("div",context.slots.default())
  }
});

export const Tab = tabItem({ name: "Tab" });
export const TabContent = tabItem({ name: "TabContent" });

解决方法

经过一些研究，我发现 this.state.users.push(newUser) 正在更新，但 TabContainer 不知何故不认为它是反应值，所以它没有改变。我已经用 activeTabId 监视 watchEffect 更改包装了所有 TabContainer 逻辑，现在它可以正常工作了！

https://codesandbox.io/s/solitary-currying-50ick?file=/src/App.vue