作用域插槽

• scopedSlots: (2.6.0+) 一個暴露傳入的作用域插槽的對象。也以函數(shù)形式暴露普通插槽。

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 訪問靜態(tài)插槽內(nèi)容，每個插槽都是一個VNode數(shù)組

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

• 在函數(shù)式組件中，this.$slots.default => context.children

slots與children的區(qū)別

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

children 會獲得兩個段落標(biāo)簽，slots().default 只會傳遞第二個匿名段落