jsx中插槽的写法

作用域插槽

• scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。

export default {
render () {
    return (
        <el-table-column width="140" {...renderInput()}></el-table-column>
      )
   },
methods: {
    renderInput () {
        return {
            scopedSlots: {
                default: ({row, index}) => {
                    // ...
                }
            }
        }
    }
}
}

<el-table-column label="WBS编号" prop="wbs" align="center" width="140" scopedSlots={{
    default: ({row, index}) => {
    // ...
    }</el-table-column>                 
}}></el-table-column>

• 多个作用域插槽

const scopedSlots = {
'option-label': renderOptionLabel,
'value-label': renderValueLabel}

  // 渲染valueLabel
  renderValueLabel ({ *node* }) {
   return <div style={{display: node.isBranch ? 'none' : 'block'}}>{ node.label }</div>
  }

普通插槽

可以通过this.$slots 访问静态插槽内容，每个插槽都是一个VNode数组

render() {
  // `<div><slot></slot></div>`
  return createElement('div', this.$slots.default)
}

• 在函数式组件中，this.$slots.default => context.children

slots与children的区别

<my-functional-component>
  <p v-slot:foo>
    first
  </p>
  <p>second</p>
</my-functional-component>

children 会获得两个段落标签，slots().default 只会传递第二个匿名段落