render 函数中使用组件等

js 复制代码
 		 render: (h) => {
 		 	// 方案1:
            return h('el-switch', {
              props: {
                value: true
              },
              on: {
                change: (e) => {
                  console.log(e, '改变')
                }
              }
            })
          // 方案二:
           const onChange = (e) => {
             console.log(e, '改变')
           }
           return (
             <el-switch value={true} onChange={onChange}>
             </el-switch>
          )

由于 render 函数中没有 v-bind、v-on 等内置指令,因此我们将如何使用呢?

js 复制代码
render () {
  const props = {
    ...this.$attrs,
    ...this.$props,
  }
  const on = {
    this.$listeners,
  }
  return (
    <a-table
      {...{ props, scopedSlots: { ...this.$scopedSlots } }}
      {...{ on }}
    >
      Object.keys(this.slots).map(name => (<template slot={name}>{this.$slots[name]}</template>))
    </a-table>
  )
}

$scopedSlots用来访问作用域插槽。对于包括 默认 slot 在内的每一个插槽,该对象都包含一个返回相应 VNode 的函数。vm.$scopedSlots 在使用渲染函数开发一个组件时特别有用。

js 复制代码
render () {
  return (
    <a-table
      onChange={this.loadData}
      {...{ scopedSlots: ...this.$scopedSlots }}
    />
  )
}

其他相关博客

相关推荐
YAY_tyy8 小时前
基于 Vue3 + VueOffice 的多格式文档预览组件实现(支持 PDF/Word/Excel/PPT)
前端·javascript·vue.js·pdf·word·excel
Yvonne爱编码8 小时前
AJAX入门-AJAX 概念和 axios 使用
前端·javascript·ajax·html·js
在路上`8 小时前
前端学习之后端java小白(三)-sql外键约束一对多
java·前端·学习
Pu_Nine_99 小时前
10 分钟上手 ECharts:从“能跑”到“生产级”的完整踩坑之旅
前端·javascript·echarts·css3·html5
東雪蓮☆10 小时前
从零开始掌握 Web 与 Nginx:入门详解
运维·服务器·前端·nginx
脑子慢且灵10 小时前
【JavaWeb】一个简单的Web浏览服务程序
java·前端·后端·servlet·tomcat·web·javaee
柯南二号10 小时前
【大前端】 断点续传 + 分片上传(大文件上传优化) 的前端示例
前端
前端小超超10 小时前
如何配置capacitor 打包的安卓app固定竖屏展示?
android·前端·gitee
xiaopengbc10 小时前
在Webpack中,如何在不同环境中使用不同的API地址?
前端·webpack·node.js
前端AK君11 小时前
React中台系统如何嵌入到业务系统中
前端