render函数渲染slot，以iview中的DropDown组件为例

iview中的DropDown组件如下:

<Dropdown>
  <a href="javascript:void(0)"> 
    下拉菜单
   <Icon type="ios-arrow-down"></Icon>
  </a>
  <DropdownMenu slot="list">
    <DropdownItem>驴打滚</DropdownItem>
    <DropdownItem>炸酱面</DropdownItem>
    <DropdownItem disabled>豆汁儿</DropdownItem>
    <DropdownItem>冰糖葫芦</DropdownItem>
    <DropdownItem divided>北京烤鸭</DropdownItem>
  </DropdownMenu>
</Dropdown>

使用render函数的写法如下:

h("Dropdown", {
  style: {
    marginLeft: "4px"
  }
}, [
  h("a", {}, [
    h("span", "下拉菜单"),
    h("Icon", {
      props: {
        type: "ios-arrow-down"
      },
    })
  ]),
  h("DropdownMenu", {
    slot: "list"
  }, [
    h("DropdownItem", {}, "驴打滚"),
    h("DropdownItem", {}, "炸酱面"),
    h("DropdownItem", {
      props: {
        disabled: true
      }
    }, "豆汁儿"),
    h("DropdownItem", {}, "冰糖葫芦"),
    h("DropdownItem", {
      props: {
        divided: true
      }
    }, "北京烤鸭")
  ])
])

在iview中render自定义组件的时候，使用如下方式会报告错误：[Vue warn]: Unknown custom element: <CustomComponents> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

h("CustomComponents", {
  style: {
    marginLeft: "4px"
  }
}, "自定义组件名字");

原因是在使用这个组件时并没有进行注册，可以在main.js中，或者在路由钩子函数里面进行注册，或者如下方式写也是可以的

h(CustomComponents, {
  style: {
    marginLeft: "4px"
  }
}, "自定义组件名字");

相关:  Vue，render，自定义组件