Render函数渲染页面

最新推荐文章于 2024-05-09 01:02:05 发布

smouns_

最新推荐文章于 2024-05-09 01:02:05 发布

阅读量3.8k

点赞数 1

分类专栏： vue 文章标签： chrome 前端前端框架 typescript

本文链接：https://blog.csdn.net/smouns_/article/details/121463446

版权

vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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