The use of render functions in VUE2

The render function can take a createElement as an argument and must be a createElement;

  • CreateElement is actually a function;
  • The render function ultimately returns createElement;
  • CreateElement can pass three arguments (only two were passed above);
    • The first argument must be of type String/Object/Function;
    • The second argument is optional and can only be of type Object.
    • The third parameter is optional and can be of String or Array type.

Here is a demo of how to change the font size by clicking a button


 <div id="app">
    <cpn :level="level" :content="content"></cpn>
    <button @click="add" :disabled="isDisabled">button</button>
  </div>
  
  <script>
    const app = new Vue({
      el: "#app".data: {
        level: 1.content: ['poster'.'zhang fei'.'black'.'Zhang Bai'].isDisabled: false
      },
      methods: {
        add() {
          if(this.level <= 4) {
            this.level++
            console.log(this.level)
          }else {
            this.isDisabled = true}}},components: {
        cpn: {
          //createElement the first argument is the tag, the second argument is the tag attribute, and the third argument is the contents of the tag (can be child tags or text).
          render(createElement) {
            return createElement(`hThe ${this.level}`, [createElement('p'[this.content[this.level-1]]]])},props: ['level'.'content',}}})</script>
Copy the code

Vue3 renames the created VNode function. H function

Because everything else is well understood. When looking at vUE’s official website, I was confused to see the use of slots in the h function. Then look online for an explanation. I didn’t find a good explanation. So I looked at the official website carefully and finally understood by accident.

The following demos are all from vUE’s official website. Directly replace the above demo to verify.

You can access the contents of static slots using this.$slots. Each slot is an array of VNodes:


render() {
  // `<div><slot></slot></div>`
  return Vue.h('div', {}, this.$slots.default())
}
Copy the code

props: ['message'].render() {
  // `<div><slot :text="message"></slot></div>`
  return Vue.h('div', {}, this.$slots.default({
    text: this.message
  }))
}
Copy the code

To pass the slot to the child component using the render function:


render() {
  // `<div><child v-slot="props"><span>{{ props.text }}</span></child></div>`
  return Vue.h('div', [
    Vue.h('child', {}, {
      // pass `slots` as the children object
      // in the form of { name: props => VNode | Array<VNode> }
      default: (props) = > Vue.h('span', props.text)
    })
  ])
}
Copy the code

A render function slot is used in VUe3

It’s important to be careful here. When we use the H function as a Vue rendered DOM. Setup must only return the h function.

Both the setup component that uses and defines the render function must return only the () => h() function.


// Sub-components provide slots and slot prop
<script>
import { h, getCurrentInstance } from 'vue'
export default {
  name: 'RenderSlot'.props: ['name'].setup(props) {
    const instance = getCurrentInstance().ctx.$slots
    return () = >
      h(
        'div',
        {},
        instance.first({
          first: `first=========${props.name}`,
        }),
        instance.second({
          second: `second=========${props.name}`,
        })
      )
  },
}
</script>
Copy the code
// Use the render function slot
setup() {
    return () = >
      h(
        RenderSlot,
        { name: 'zh' },
        {
          first: (slotProps) = > h('span', slotProps.first),
          second: (slotProps) = > h('span', slotProps.second),
        }
      )
  },
Copy the code

For detailed explanation of h function, please see the Chinese document: vue3js.cn/docs/zh/gui…