Question

组件smart-list可以完成工作，并且正在渲染正确的组件。它只是没有传递道具。我希望它们位于context.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);
    }
  }
};

我准备了codesandbox example

我想念什么？

Answer 1

我找到了解决方案。在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对象吗？

Vue：功能组件不接收道具

1 个答案: