时间戳

首页 > 解决方案 > Vue：功能组件不接收道具

vue.js - Vue：功能组件不接收道具

问题描述

该组件smart-list完成了它的工作并呈现了正确的组件。它只是不传递道具。我希望他们在 acontext.data但它是undefined。

SmartList.vue

import EmptyList from "./EmptyList";
import FullList from "./FullList";

export default {
  functional: true,
  props: {
    items: {
      type: Array
    }
  },
  render(h, { props, data, children }) {
    if (props.items.length > 0) {
      return h(FullList, data, children);
    } else {
      return h(EmptyList, data, children);
    }
  }
};

我准备了一个codeandbox示例

我想念什么？

标签： vue.jscomponents

解决方案

我找到了解决方案。在smart-list组件中，我更改了一行：

import EmptyList from "./EmptyList";
import FullList from "./FullList";

export default {
  functional: true,
  props: {
    items: {
      type: Array
    }
  },
  render(h, { props, data, children }) {
    if (props.items.length > 0) {
-    return h(FullList, data, children);
+    return h(FullList, { attrs: props }, children);
    } else {
      return h(EmptyList, data, children);
    }
  }
};

现在它起作用了。有人能指出我为什么传递完整的data对象不起作用吗？

推荐阅读