Vue 之函数式组件

函数式组件：

1. functional: true

2. 无状态（没有 data）、无实例（没有 this 上下文）、无生命周期

3. 用一个简单的 render 函数返回虚拟节点使他们渲染的代价更小

const lists = [
  { name: '客户', prop: 'userName' },
  { 
    name: '单据状态',
    prop: 'status',
    customRender: (record, list) => {
      return record['status'] === 1 ? '新建' : '已审核'
    }
  },
  { name: '调整原因', prop: 'remark' },
]
export default {
  functional: true,
  props: {
    form: {
      type: Object,
      default: () => {},
    }
  },
  render (h, { props }) {
    return <div>
      {lists.map(item => {
        const value = item.customRender ? item.customRender(props.form, item) : props.form[item.prop]
        return <p class="detail-line">
          <span class="detail-title">{item.name}：</span>
          <span class="detail-value">{isDef(value) ? value || '-' : '-'}</span></p>
      })}
    </div>
  }
}

如何使用函数式组件呢？

import DetailBasic from './components/detail-basic'
export default {
  components: {
    DetailBasic,
  },
  data () {
    return {
      form: {},
    }
  },
  render () {
    return <div>
      <detail-basic form={this.form} />
    </div>
  }
}