vue3和vue2中渲染函数使用区别

vue2中渲染函数的使用

render函数可以接收 createElement 作为参数，并且必须是 createElement；

• createElement 其实也是一个函数；
• render 函数最终要返回 createElement；
• createElement 可以传三个参数（上面只传了两个）；
• • 第一个参数必需，可以是 String / Object / Function 类型；
  • 第二个参数可选，只能是 Object 类型；
  • 第三个参数可选，可以是 String / Array 类型。 下面是一个点击按钮改变字体大小的demo

 <div id="app">
    <cpn :level="level" :content="content"></cpn>
    <button @click="add" :disabled="isDisabled">按钮</button>
  </div>
  
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        level: 1,
        content: ['张海', '张飞', '张黑', '张白'],
        isDisabled: false
      },
      methods: {
        add() {
          if(this.level <= 4) {
            this.level++
            console.log(this.level)
          }else {
            this.isDisabled = true
          }
        }
      },
      components: {
        cpn: {
          //createElement第一个参数是标签   第二个参数是标签属性  第三个参数是  标签里面的内容（可以是子标签，也可以是文本）
          render(createElement) {
            return createElement(`h${this.level}`, [createElement('p',[this.content[this.level-1]])])
          },
          props: ['level', 'content'],
        }
      },
    })
  </script>

vue3将创建的VNode函数改名。h函数

由于其他的都和好理解。当看vue官网的时候，看到在h函数中使用插槽的时候一脸懵逼。然后就在网上找一找解释。没有找到讲解好的。于是就又仔细看官网，最后无意间理解了。

下面这些demo都是vue官网上的。直接替换到上面demo即可验证。

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

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

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

要使用渲染函数将插槽传递给子组件，请执行以下操作：

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

vue3中使用渲染函数插槽

这里一定要注意了。当我们使用h函数当做vue渲染的dom时。setup中一定只能返回h函数。

使用和定义渲染函数组件setup都必须只返回（）=> h()函数。

// 子组件提供插槽和插槽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>

// 使用渲染函数插槽
setup() {
    return () =>
      h(
        RenderSlot,
        { name: 'zh' },
        {
          first: (slotProps) => h('span', slotProps.first),
          second: (slotProps) => h('span', slotProps.second),
        }
      )
  },

具体h函数的讲解请看中文文档： vue3js.cn/docs/zh/gui…