VUE.JS 渲染函数

Posted 2023-02-23

【中文标题】VUE.JS 渲染函数

【英文标题】：VUE.JS render function

【发布时间】：2019-01-16 19:06:37

【问题描述】：

我正在学习 Vue.js，但在使用波纹管渲染功能时卡住了：

这是我从组件中调用的 javascript 文件。

import Button from './Button'

export default 
  functional: true,
    render(h) 
    return(
        <div id='toolbar'>
        <Button type='markup' tag='strong'> B </Button>
        <Button type='markup' tag='em'> I </Button>
        <Button type='section' tag='h1'> H1 </Button>
        <Button type='section' tag='h2'> H2 </Button>
        <Button type='section' tag='ul'> UL </Button>
        <Button type='section' tag='ol'> OL </Button>
        <slot />
      </div>
    )
  

我需要导出上述函数，但出现错误。

      5 |     render(h) 
      6 |     return(
   >  7 |         <div id='mobiledoc-toolbar'>
        |         ^
      8 |         <Button type='markup' tag='strong'> B </Button>

调用此函数时出现错误，不确定这是否仅适用于使用 backqouts/backticks

【问题讨论】：

首先我不太明白这个问题。但是要指出正确的方向，请使用 ES6 模板字符串来返回标记。看看这个：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

@bern 看来您应该提供一个您使用的Markup 库。

@henk.io & GONG - 我创建了一个叫做editor的组件，这个组件导入带有上面渲染功能的javascript文件，JS文件导入按钮标记的东西都应该在组件编辑器中渲染。

【参考方案1】：

在 redux 中，您确实可以将 html 标记与 JavaScript 混合使用。但是在 Vue.js 中没有这样的东西。唯一的方法是将您的 HTML 包装在模板字符串中：

return(`
    <div id='mobiledoc-toolbar'>
    ...
    </div>
`

或者为 vue 使用 <template> 模板格式（如果您使用的是 webpack）。此类组件如下所示：

<template>
  <div id="toolbar">
  </div>
</template>

<script>
    export default new Vue(

    );
</script>

<style lang="scss">
  // Your styles here
</style>

然后就不需要render() 方法了。

PS：是的，正如@Bert 建议的那样，你也可以使用 Babel JSX Transform plugin 并使用 JSX 语法。

【讨论】：

所以我的问题是基于我对 vue 的工作原理缺乏了解，因为我认为也许我可以在 vue 中将 HTML 标记与 JavaScript 混合使用。贴出来的信息帮助我了解vueJS的基础知识，感谢提示