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

其他相关博客

相关推荐
zwjapple5 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20207 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem8 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊8 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术8 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理8 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing8 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止9 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall9 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴9 小时前
简单入门Python装饰器
前端·python