Vue：功能组件不接收道具答案

【问题标题】：Vue: Functional component doesn't receive propsVue：功能组件不接收道具
【发布时间】：2019-07-18 07:19:59
【问题描述】：

组件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

我错过了什么？

【问题讨论】：

标签： vue.js components

【解决方案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 对象不起作用吗？ ?

【讨论】：