Render函数渲染页面

Render是使用js的完全编程能力来渲染页面,即用js来构建DOM.

说明:render是一个方法,自带一个形参createElement(还有context..),这个参数也是一个方法,是用来创建虚拟dom节点的,也就是html模板的,然后渲染(render)到指定的节点上。render函数的目的是创建虚拟dom节点。因为createElement是个形参,所以这个形参可以用任何字符替换,比如h

  • createElement/h:
    createElement接收3个参数:

第一个参数可以是HTML标签名,组件或者函数都可以;此参数是必须的;

第二个为数据对象,虚拟dom的配置(可选);

第三个为子节点,支持字符串与数组(多层嵌套h())(可选)。

vue2.0里面的写法

render: h => h(App)

等价于 

 render:function(h,context){

            return h(App);

           }

也等价于

render:function(createElement,context){

return createElement(App)

}

假设我们要生成一些带锚点的标题:子组件想要根据父组件传递的 level 值(1-6)来决定渲染标签 h 几

<h1>
  <a name="hello-world" href="#hello-world">
    Hello world!
  </a>
</h1>
<anchored-heading :level="1">Hello world!</anchored-heading>

当开始写一个只能通过 level prop 动态生成标题 (heading) 的组件时,你可能很快想到这样实现:

<script type="text/x-template" id="anchored-heading-template">
  <h1 v-if="level === 1">
    <slot></slot>
  </h1>
  <h2 v-else-if="level === 2">
    <slot></slot>
  </h2>
  <h3 v-else-if="level === 3">
    <slot></slot>
  </h3>
  <h4 v-else-if="level === 4">
    <slot></slot>
  </h4>
  <h5 v-else-if="level === 5">
    <slot></slot>
  </h5>
  <h6 v-else-if="level === 6">
    <slot></slot>
  </h6>
</script>

 对于上面的 HTML,这样定义组件接口实现:

Vue.component('anchored-heading', {
  template: '#anchored-heading-template',
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

这里用模板并不是最好的选择:不但代码冗长,而且在每一个级别的标题中重复书写了 <slot></slot>,在要插入锚点元素时还要再次重复。

虽然模板在大多数组件中都非常好用,但是显然在这里它就不合适了。那么,我们来尝试使用 render 函数重写上面的例子:

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 子节点数组
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

在这个例子中,你需要知道,向组件中传递不带 v-slot 指令的子节点时,比如 anchored-heading 中的 Hello world!,这些子节点被存储在组件实例中的 $slots.default 

你可以通过 this.$slots 访问静态插槽的内容,每个插槽都是一个 VNode 数组

render: function (createElement) {
  // `<div><slot></slot></div>`
  return createElement('div', this.$slots.default)
}

也可以通过 this.$scopedSlots 访问作用域插槽,每个作用域插槽都是一个返回若干 VNode 的函数

props: ['message'],
render: function (createElement) {
  // `<div><slot :text="message"></slot></div>`
  return createElement('div', [
    this.$scopedSlots.default({
      text: this.message
    })
  ])
}

ps:

render函数return什么该组件就渲染什么

以render函数渲染时,内部最好不要出现注释

 总结:
1. render方法的实质就是生成template模板; 
2. 通过调用一个方法来生成,而这个方法是通过render方法的参数传递给它的; 
3. 这个方法有三个参数,分别提供标签名,标签相关属性,标签内部的html内容 
4. 通过这三个参数,可以生成一个完整的木模板

备注:

  1. render方法可以使用JSX语法,但需要Babel plugin插件;
  2. render方法里的第三个参数可以使用函数来生成多个组件(特别是如果他们相同的话),只要生成结果是一个数组,且数组元素都是VNode即可;

注意: 
render函数是有限制的,Vue.js 2.X支持,但是1.X无法使用。

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值