在 vuetify 的计算属性中使用渲染函数答案

【问题标题】：using a render function inside a computed property with vuetify在 vuetify 的计算属性中使用渲染函数
【发布时间】：2019-07-16 08:41:31
【问题描述】：

好的，所以我是使用渲染函数的新手，这可能是一个奇怪的问题。尝试在步进函数中动态加载步骤，现在我的代码如下所示：

<div id="app">
  <v-app id="inspire">
  {{steps}}
  </v-app>
</div>
...
new Vue({
  el: '#app',
  data () {
    return {
      e1: 0,
      mySteps: ['Boom', 'Wham', 'Kaboom!', 'superman']
    }
  },
  methods: {
    render(createElement){
      const stepperStep = createElement('v-stepper-step', 'Some step')
      const divideAndConquer = createElement('v-divider')
      return createElement('v-stepper', [
        stepperStep, divideAndConquer
      ])
    }
  },
  computed: {
    steps(){
      if (this.mySteps & this.mySteps.length > 0){
        return this.render(createElement)
      }
    }
  }
})

为什么在我的应用程序中没有呈现任何内容（也没有错误）？

【问题讨论】：

标签： vue.js vuejs2 functional-programming vuetify.js

【解决方案1】：

渲染函数不能与template标签一起使用，模板标签会“覆盖”渲染函数。

另外，渲染函数不能在method关键字内，而是直接在脚本的第一级。

在您的情况下，您的代码应该是：

<div id="app"></div>

new Vue({
    el: '#app',
    // ...
    render(createElement){
      const stepperStep = createElement('v-stepper-step', 'Some step')
      const divideAndConquer = createElement('v-divider')
      return createElement('v-stepper', [
        stepperStep, divideAndConquer
      ])
    }
    // ...
  })

在您的渲染函数中，您必须返回一些将在您的应用程序中渲染的 JSX

在上面的代码中，元素v-stepper将被渲染并添加到#app元素中

cf：https://vuejs.org/v2/guide/render-function.html

【讨论】：

谢谢，因为有template 标签，所以只是为了澄清这项工作？ codepen.io/couellet/pen/YMbrvz 此外，在这个工作示例中，渲染函数是如何在 methods 内的？
id app 的标签是 Vue 实例所必需和需要的，但是你不能在里面添加东西，因为渲染函数会在里面渲染东西。我编辑了我的答案，我错过了那部分:)。
Furthermore, how is it that in this working example the render function is inside the methods?render函数不在methods一个，仔细看;)。
现在我很好奇我将如何选择性地应用渲染函数，它都在同一个函数render 所以不知道这是如何完成的？
我认为您应该阅读有关单文件组件的内容，然后您将能够在每个组件中拥有一个渲染函数，然后将您的代码分开以选择性地应用好组件中的东西。