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

【问题标题】：Vue Composition Api render function sync emit doesn't workVue Composition Api 渲染功能同步发射不起作用
【发布时间】：2021-04-06 00:35:39
【问题描述】：

我想重构 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, 
    TabContent,
    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,
      required: true,
    },
  },
  setup(_, context) {
    return () => h("div", context.slots.default())
  }
});

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

【问题讨论】：

我进行了快速测试，您的代码似乎可以正常工作，父模型正在为我正确更新：codesandbox.io/s/flamboyant-brook-46r62?file=/src/App.vue
感谢@LeBen 的回复。是的，activeTabId 的值正在 App.vue 中更新，但不知何故新值没有传递给TabContainer。似乎TabContainer 只呈现一次并且从不更新。在标签上单击 Content 值应该会改变。

标签： javascript vue.js vue-composition-api vue-render-function

【解决方案1】：

经过一些研究，我发现 activeTabId 正在更新，但 TabContainer 不知何故不认为它是反应值，所以它没有改变。我已经用 watchEffect 包装了所有 TabContainer 逻辑，观察 activeTabid 的变化，它现在可以正常工作了！

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

【讨论】：