noSlot

对于写一些 omi 插件，noSlot 非常有用，它不会把 children 插入到 DOM 中，并且你可以在插件中通过 props.children 拿到虚拟 DOM。

  1. import { define, render, WeElement } from 'omi'
  3. define('fancy-tabs', class extends WeElement {
  4.   static noSlot = true
  6.   render() {
  7.     return [
  8.       <div id="tabs">
  9.         <slot id="tabsSlot" name="title" />
  10.       </div>,
  11.       <div id="panels">
  12.         <slot id="panelsSlot" />
  13.       </div>,
  14.       <div>Show me only when noSlot is true!</div>
  15.     ]
  16.   }
  17. })
  19. define('my-app', class extends WeElement {
  20.   render() {
  21.     return (
  22.       <div>
  23.         <fancy-tabs>
  24.           <button slot="title">Title</button>
  25.           <button slot="title" selected>
  26.             Title 2
  27.           </button>
  28.           <button slot="title">Title 3</button>
  29.           <section>content panel 1</section>
  30.           <section>content panel 2</section>
  31.           <section>content panel 3</section>
  32.         </fancy-tabs>
  33.       </div>
  34.     )
  35.   }
  36. })
  38. render(<my-app />, 'body')