vue使用render来写组件

vue使用render来写组件

博客园同步更新
ps：内容简单勿吐槽。这里的例子是跟着官网的渲染函数。

渲染函数介绍

Vue 推荐在绝大多数情况下使用模板来创建你的HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。

实例

让我们深入一个简单的例子，这个例子里render函数很实用。假设我们要生成一些带锚点的标题。
首先来定义一个简单的组件：

<template>
  <div>
     <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>
     <slot></slot>
  </h6>
  </div>
</template>
<script>
export default {
  props:{
    level:{
      type:Number,
      default:1
    }
  },
  data(){
    return {

    }
  }
}
</script>

组件完成，来引用组件：

<template>
  <div>
    <heading :level='level'>这里是插槽内容 现在的leave={{2}}</heading>
  </div>
</template>
<script>

import heading from './heading.vue'
export default {
  components:{
    heading:heading
  },
  data() {
    return {
      level:2
    }
  },

}
</script>

效果如图，如果打开控制台也是可以看见标签元素是h2。
这样写显得很麻烦，如果我们来试试render函数写一波新组件

<script>
export default {
  name: 'heading',
  props: {
    level: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {}
  },
  computed: {},
  methods: {},
  render(createElement) {
    let arr = [1,2,3,4,5]
    return createElement('div', {
      class: {
        // 这里可以添加class
      },
      attrs: {
        // 添加属性的地方
      },
      domProps: {
        // 内容
      },
      on: {
          // 添加事件的地方
      },
    },
    [
    arr.includes(this.level)?createElement('h'+this.level, this.$slots.default):createElement('h6', this.$slots.default)

    ])
  },
}
</script>

这里保持和原来使用模板写的组件一样最外层一层div里面才是包这h标签，当非12345的时候，使用h6标签。
所以这里可以简单看出createElement(Element,options,childrens);Element是要渲染的元素标签，options这里是该标签的一些配置也可以添加事件比如class/attrs/domProps属性，childres是一个数组里面放着子内容也可以由多个createElement(Element,options,childrens)这样的内容，具体的话看具体情况。

结语

关于渲染函数还是要多使用，孰能生巧，肯定没错，写多了就理解的快。第一次使用markdown写文章 还是很爽的，只是学到一些简单的语法。之后应该会分享一些ts和vue3的实践，因为最近写的最多的就这个。