Vue3-05 渲染函数

最新推荐文章于 2024-09-30 16:44:13 发布

「已注销」

最新推荐文章于 2024-09-30 16:44:13 发布

阅读量1.6k

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/duola8789/article/details/117037539

版权

Vue3 中，虽然模板通常用于创建HTML，但渲染函数在特定情况下能提供更简洁的解决方案。本文介绍了为何需要渲染函数，详细讲解了实例Property API、如何创建VNodes、使用JavaScript替代模板功能，包括绑定、事件修饰符和插槽的处理。此外，还探讨了JSX的使用及其在何时选择使用的情况。

摘要由CSDN通过智能技术生成

为什么需要渲染函数

Vue推荐多数情况使用模板创建HTML，但是在一些情况下使用渲染函数会更加方便，例如，例如要生成带有锚点的标题

<h1>
  <a name="hello-world" href="#hello-world">
    Hello world!
  </a>
</h1>

将这段代码封装为组件，传入level作为参数，level取值1 - 6，对应H1 - H6，如果使用模板需要借助slot并且配合大量的if...else：

<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>
</template>

模板很啰嗦，可以考虑使用渲染函数来进行优化

<script lang="ts">
import {defineComponent, h} from 'vue';

export default defineComponent({
  name: 'anchored-heading',
  props: {
    level: {
      type: Number,
      required: true
    }
  },
  render() {
    const tag = `h${this.level}`;
    return h(tag, {}, this.$slots.defau

最低0.47元/天解锁文章