2020-03-09 Vue的JSX写法

readme

github.com/vuejs/jsx/t…

示例

嘉琪集团crp
src\page\productManagement\planInventory\liner\basic\subs\bus\comps\TableInputer\TableInputer.js

slot

<div class="table-input">
  { h('div', this.$slots.default) }
</div>

for

嘉琪集团crp src/page/productManagement/regimentPlan/children/liner/OrderMaker/comps/CabinGround/comps/LinkTitleBar/index.js

<div class="scroll-body">
  {
    this.list.map((el, index) => {
      return <div class={{ 'bar-outer': true, selected: el.selected }}
        key={ el.id }
        onClick={ this.clickHandler.bind(this, index) }>
        <div class="title-text"
          title={ el.label }>
          { el.label }
        </div>
        {
          this.options.deletable? <div class="close-btn"
            onClick={ this.closeHandler.bind(this, index) }>
            <i class="el-icon-close"></i>
          </div>: null
        }
      </div>
    })
  }
</div>

1. 给指定属性绑定一个对象值: class={{ 'bar-outer': true, selected: el.selected }}用的是双花括号, 绑定普通值,用的是单花括号key={ el.id }
2. 绑定事件: $event为事件的默认参数

closeHandler(index, $event){
    ...
}