使用Vue.js 3片段和渲染功能

Question

我应该如何将Vue 3片段与渲染函数一起使用？下面的代码不应该工作吗？

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

Answer 1

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

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>

现场演示