vue3组件中使用render函数

本文主要是介绍vue3组件中使用render函数，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

官方API见这里： https://v3.vuejs.org/api/options-dom.html#render

为了制作一个下面这样的自定义组件，满足： 传入值作为heading的层级，并将自定义中的内容作为heading的内容。

<anchored-heading :level="1">Hello world!</anchored-heading>

如果不用render()函数，那么你的代码可能是这样的：

const { createApp } = Vue

const app = createApp({})

app.component('anchored-heading', {
  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>
  `,
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

使用render()，你的代码可能是这样的：

const { createApp, h } = Vue

const app = createApp({})

app.component('anchored-heading', {
  render() {
    return h(
      'h' + this.level, // tag name
      {}, // props/attributes
      this.$slots.default() // array of children
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

Goal

Implement the "example" component which given the following usage:

<example :tags="['h1', 'h2', 'h3']"></example>

which renders the expected output:

<div>
  <h1>0</h1>
  <h2>1</h2>
  <h3>2</h3>
</div>

Solution

Vue.component('example', {
  props: ['tags'],
  render (h) {
    // Note that the second argument (data object) can be omitted, and the
    // children argument can accept strings or numbers besides Array of vnodes.
    // api 可以参考 https://v3.vuejs.org/api/global-api.html#h
    return h('div', this.tags.map((tag, i) => h(tag, i)))
  }
})

这篇关于vue3组件中使用render函数的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！