使用带有渲染功能的 Vue.js 3 片段 [英] Use Vue.js 3 fragments with render function

问题描述

我应该如何使用带有渲染功能的 Vue 3 片段?下面的代码不应该工作吗?

How should I use Vue 3 fragments with render functions? shouldn't the following code work?

import { h } from 'vue'

render () {
  return [
    h('label', { htmlFor: 'username' }, this.label),
    h('input', { id: 'username' }),
  ]
},

推荐答案

是的，在渲染函数中定义片段的语法是正确的:

Yes that syntax is correct for defining fragments in render functions :

import { h } from "vue";
export default {
  props: ["label", "errors"],

  render() {
    return [
      h("label", { htmlFor: "username" }, this.label),
      h("input", { id: "username" }),
      this.errors && h("span", { class: "red" }, this.errors)
    ];
  }
};

这相当于:

<template>
 <label for="username"> {{this.label}}</label>
  <input id="username" />
   <span class="red" v-if="errors">{{errors}}</span>
</template>

现场演示

这篇关于使用带有渲染功能的 Vue.js 3 片段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！