Vuejs2.0学习之二（Render函数,createElement，vm.$slots，函数化组件，模板编译，JSX）

最新推荐文章于 2021-05-27 05:22:55 发布

冰雪为融

最新推荐文章于 2021-05-27 05:22:55 发布

阅读量489

点赞数

分类专栏： vue 文章标签： render

vue 专栏收录该内容

81 篇文章

订阅专栏

本文深入探讨Vue.js中render函数的使用，包括class、style、属性、事件监听等API细节，以及如何通过render函数实现更复杂的组件渲染逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中的render函数，我在网上找了很多，下面这一篇文章最详细

https://blog.youkuaiyun.com/kkae8643150/article/details/52910389/

{
  // 和`v-bind:class`一样的 API
  'class': {
    foo: true,
    bar: false
  },
  // 和`v-bind:style`一样的 API
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 正常的 HTML 特性
  attrs: {
    id: 'foo'
  },
  // 组件 props
  props: {
    myProp: 'bar'
  },
  // DOM 属性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器基于 "on"
  // 所以不再支持如 v-on:keyup.enter 修饰器
  // 需要手动匹配 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅对于组件，用于监听原生事件，而不是组件使用 vm.$emit 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令. 注意事项：不能对绑定的旧值设值
  // Vue 会为您持续追踨
  directives: [
    {
      name: 'my-custom-directive',
      value: '2'
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 如果子组件有定义 slot 的名称
  slot: 'name-of-slot'
  // 其他特殊顶层属性
  key: 'myKey',
  ref: 'myRef'
}