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

原创

于 2020-11-13 11:26:17 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #前端

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("Drop