Vue3 渲染函数 Api 的使用

Vue3 中 渲染函数的用法更简单、直接，插槽统一使用 $slots 获取。

<template>
   <!-- 渲染函数 Render Api 使用 -->
   <RenderTest v-model:counter="counter">
    <template #default>title</template>
    <template #content>content...</template>
  </RenderTest>
</template>

<script>
import { h } from "vue";

export default {
  data() {
    return {
      counter: 1,
    };
  },
  components: {
    RenderTest: {
      props: {
        counter: {
          type: Number,
          default: 0,
        },
      },
      render() {
        return h("div", [
          h(
            "div",
            {
              onClick: this.onClick,
            },
            [`I am RenderTest: ${this.counter}`, this.$slots.default(), this.$slots.content()]
          ),
        ]);
      },
      methods: {
        // 点击更新 counter 的值
        onClick() {
          this.$emit("update:counter", this.counter + 1);
        },
      },
    },
  }
}
</script>