Vue中render函数常见用法

工作 同时被 2 个专栏收录
22 篇文章 0 订阅
22 篇文章 0 订阅

问题:

1、render函数是什么

2、render函数怎么用

render函数是什么

简单的说,在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOM

因为vue是虚拟DOM,所以在拿到template模板时也要转译成VNode的函数,而用render函数构建DOM,vue就免去了转译的过程。

当使用render函数描述虚拟DOM时,vue提供一个函数,这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h,

vm中有一个方法_c,也是这个函数的别名

先看官网对 createElement的介绍

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签字符串,组件选项对象,或者
  // 解析上述任何一种的一个 async 异步函数,必要参数。
  'div',

  // {Object}
  // 一个包含模板相关属性的数据对象
  // 这样,您可以在 template 中使用这些属性。可选参数。
  {
    // (详情见下一节)
  },

  // {String | Array}
  // 子节点 (VNodes),由 `createElement()` 构建而成,
  // 或使用字符串来生成“文本节点”。可选参数。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

就是说createElement(params1,params2,params3)接受三个参数,每个参数的类型官方介绍已经说明

render函数怎么用

例:


                    render:(h) => {
                            return h('div',{
                   //给div绑定value属性
                                props: {
                                    value:''
                                },
                   //给div绑定样式
                   style:{
                      width:'30px'
                   }, 
                   //给div绑定点击事件  
                                on: {
                                    click: () => {
                                        console.log('点击事件')
                                    }
                                },

                            })
                        }    

深入 data 对象

有一件事要注意:正如在模板语法中,v-bind:class 和 v-bind:style ,会被特别对待一样,在 VNode 数据对象中,下列属性名是级别最高的字段。该对象也允许你绑定普通的 HTML 特性,就像 DOM 属性一样,比如 innerHTML (这会取代 v-html 指令)。


 {
  // 和`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
  },
  // 自定义指令。注意,你无法对 `binding` 中的 `oldValue`
// 赋值,因为 Vue 已经自动为你进行了同步。
directives: [
 {
    name: 'my-custom-directive',
    value: '2',
    expression: '1 + 1',
    arg: 'foo',
    modifiers: {
     bar: true
    }
   }
  ],
  // Scoped slots in the form of
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
   default: props => createElement('span', props.text)
  },
  // 如果组件是其他组件的子组件,需为插槽指定名称
  slot: 'name-of-slot',
  // 其他特殊顶层属性
  key: 'myKey',
  ref: 'myRef'
 }
  • 5
    点赞
  • 3
    评论
  • 16
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值