使用带有渲染功能的 Vue.js 3 片段

Posted

技术标签:

【中文标题】使用带有渲染功能的 Vue.js 3 片段【英文标题】:Use Vue.js 3 fragments with render function 【发布时间】:2021-02-07 03:59:10 【问题描述】:

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

import  h  from 'vue'

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

【问题讨论】:

【参考方案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>

LIVE DEMO

【讨论】:

以上是关于使用带有渲染功能的 Vue.js 3 片段的主要内容,如果未能解决你的问题,请参考以下文章

带有片段着色器的 GLSL 仅渲染黑色 GL_POINTS

Vue.js 中的片段

vue.js 2 - 将单个文件组件的 html 片段提取到独立文件中

根据顶点世界位置Y坐标修改Metal片段着色

正在渲染opengl的随机屏幕片段-这表明啥错误?

让 Vue.js 从带有 JSX 包的基本 CLI 安装使用 TypeScript 渲染 JSX