Question

在Vue的模板语法中，您可以使用模板标记将DOM元素分组在一起，而渲染器不会实际创建DOM元素。例如：

<template>
  <h1>{{ title }}</h1>
  <p>{{ content }}</p>
</template>

如何使用render函数实现相同的目的？以下内容不起作用：

render(h) {
  return h('template', [
    h('h1', this.title),
    h('p', this.content)
  ])
}

Answer 1

带有render functions的组件没有模板标记或属性。您可以执行以下操作。

new Vue({
  el: '#editor',
  data: {
    input: '# hello'
  },
 render(h) {
    return h('div', 
    [
      h('p', 'Example Text')
    ])
  },

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<script src="https://unpkg.com/marked@0.3.6"></script>
<script src="https://unpkg.com/lodash@4.16.0"></script>

<div id="editor"></div>

等效于Vue渲染功能中的模板标签

1 个答案: