Props

import { WeElement, define, render } from 'omi'
define('my-first-element', class extends WeElement {
  render(props) {
    return (
      <h1>Hello, {props.name}!</h1>
    )
  }
})
render(<my-first-element name="world"></my-first-element>, 'body')

你也可以传任意类型的数据给 props:

import { WeElement, define, render } from 'omi'
define('my-first-element', class extends WeElement {
  render(props) {
    return (
      <h1>Hello, {props.myObj.name}!</h1>
    )
  }
})
render(<my-first-element my-obj={{ name: 'world' }}></my-first-element>, 'body')

my-obj 将映射到 myObj，驼峰的方式。你可以通过静态属性 props 来设置默认值:

import { WeElement, define, render } from 'omi'
define('my-first-element', class extends WeElement {
  static defaultProps = {
        name: 'Omi',
        myAge: 18
    }
  render(props) {
    return (
      <h1>Hello, {props.name}! Age {props.myAge}</h1>
    )
  }
})
render(<my-first-element name="world"></my-first-element>, 'body')

通过 props ，你可以透传 style 或者 class 给根节点，比如 → 这里 透传 style:

<el-button onClick={this.onClick} style="color:red;">默认按钮1</el-button>
<el-button type="primary" style={{color:'red'}}>主要按钮</el-button>