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 }}
    />
  )
}

其他相关博客

相关推荐
我是华为OD~HR~栗栗呀39 分钟前
华为OD-23届-测试面经
java·前端·c++·python·华为od·华为·面试
β添砖java2 小时前
vivo响应式官网
前端·css·html·1024程序员节
麦麦大数据6 小时前
F032 材料科学文献知识图谱可视化分析系统(四种知识图谱可视化布局) | vue + flask + echarts + d3.js 实现
vue.js·flask·知识图谱·数据可视化·论文文献·1024程序员节·科研图谱
web打印社区7 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗7 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长7 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅8 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_8 小时前
Chrome开发者工具
前端·chrome
YiHanXii8 小时前
this 输出题
前端·javascript·1024程序员节
楊无好8 小时前
React中ref
前端·react.js