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

其他相关博客

相关推荐
Adolf_19934 分钟前
axios拦截器
前端·javascript
一一一87115 分钟前
JavaScript 中的 this:谁在调用我?
javascript
多啦C梦a15 分钟前
《ProtectRoute怎么用?》 前端登录拦截器!React ProtectRoute + 懒加载,从入门到会用
前端·javascript·react.js
AliciaIr17 分钟前
JavaScript事件循环机制:从底层原理到幽默解读
javascript
sophie旭17 分钟前
《深入浅出react》总结之 10.3 Commit阶段流程探秘
前端·react.js·源码阅读
绅士玖18 分钟前
🔍 深入理解React的useContext Hook:从原理到实战
前端·react.js
植物昂光19 分钟前
基于Node.js的微博热榜抓取与展示开发记录
前端·node.js
面包蟹19 分钟前
JavaScript 的深浅拷贝
前端·javascript
再见了那维莱特20 分钟前
React Server API + Vite 简单实现SSR【根据文档提供的案例进行分析】
前端
前端一小卒22 分钟前
《深入浅出 React 19:AI 视角下的源码解析与进阶》- diff算法核心
前端·javascript·react.js