Vue 项目中 JSX 语法如何使用 scopedSlots

面试官：

• Vue如何在 JSX 中使用 scopedSlots ?
• scopedSlots 和 slot-scope 的区别

scopedSlots 和 slot-scope 的区别

 

• 作用相同：都是作用域插槽
• 场景不同：slot-scope 是模板语法，scopedSlots 则是编程式语法
• 使用不同：在 template 中使用 slot-scope，在 render 函数中使用 scopedSlots

在 template 中如何使用

slot chac 

<div class="container">
  <slot name="header" :text="headerText"></slot>
  <slot :text="defaultText"></slot>
  <slot name="footer" :text="footerText"></slot>
</div>

在 render 函数中如何使用

render(h) {
  return h("div", { class: "container" }, [
    // 相当于 <slot name="header" :text="headerText"></slot>
    this.$scopedSlots.header({ text: this.headerText }),
    // 相当于 <slot :text="defaultText"></slot>
    this.$scopedSlots.default(this.defaultText),
    this.$scopedSlots.footer({ text: this.footerText })
  ]);
}

在 JSX 中如何使用

使用之前我们需要安装解析 JSX 语法的相关插件：

npm install\
  babel-plugin-syntax-jsx\
  babel-plugin-transform-vue-jsx\
  babel-helper-vue-jsx-merge-props\
  babel-preset-env\

配置 babel.config.js 文件

const plugins = []
plugins.concat('jsx-v-model', 'transform-vue-jsx')

module.exports = {
  plugins: [
    ...plugins,
  ]
}

使用 JSX 语法在 scopedSlots（作用域插槽）中如何书写呢？

const columns = function (h) {
  const columns = [
    { title: '用户名', dataIndex: 'username', scopedSlots: { customRender: 'username' } },
    { title: '操作',
      width: 80,
      dataIndex: 'action',
      customRender: (text, record, index) => {
        return <span>
          { ['edit', 'add'].includes(this.mode) &&
            <a on-click={this.handleDelete.bind(this, { text, record, index })} href="javascript:;">删除</a>
          }
        </span>
      },
  ]
  return columns
}
<a-table
  size="small" bordered
  rowKey="id"
  data-source={this.tableData}
  columns={columns.call(this, h)}
  {...{ scopedSlots: this.scopedSlotsList }}
/>

compunted: {
  scopedSlotsList () {
    const obj = {}
    obj['username'] = (text, record, index) => {
      return <p>text</p>
    }
    return obj
  }
},

更多信息，请查看：在 render 函数中，Vue 实例属性：$attrs、$props、$listeners 和 $scopedSlots的使用。