VueJS：如何在渲染函数中访问计算值答案

【问题标题】：VueJS: How to access computed values in render functionVueJS：如何在渲染函数中访问计算值
【发布时间】：2018-04-05 05:25:23
【问题描述】：

我目前有一个具有此渲染功能的组件：

render(createElement, context) {

        return createElement(
            'div', {
                'class': 'sliced'
            },
            [
                createElement('div', {
                        'class' : 'sliced-inner',
                        'style' : context.style
                    }
                )

            ]
        )

    },

我添加了功能性：true。 “样式”是一个计算值，但它似乎没有与上下文对象一起传递。有什么方法可以访问 Vue 渲染函数中的计算值？

【问题讨论】：

使用this.style 访问渲染函数中的计算值
我忘了提到我在我的组件中添加了“功能：true”，我相信这是使组件具有反应性所必需的。从现在开始，当计算值改变时，内容不会改变。

标签： vue.js vuejs2 vue-component

【解决方案1】：

功能组件没有状态，因此计算属性是多余的。在下面的示例中，我创建了一个标题组件，当点击时它会在 foo 和 bar 之间切换：

Vue.component('message', {
  render (createElement) {
    return createElement('h1', {
      on: {
        click: event => {
          return this.foo = !this.foo 
        }
      }
    }, this.fooBar)
  },
  computed: {
    fooBar() {
      return (this.foo) ? 'foo' : 'bar'
    }
  },
  data(){
    return {
      foo: true
    }
  }
});

如您所见，标头值是基于计算得出的，它可以正常工作，因为它不是功能组件，因此可以具有状态：https://jsfiddle.net/hwbbukvd/

如果我通过添加functional: true 使其成为功能组件，则它不起作用，因为它的显示依赖于具有状态的组件：https://jsfiddle.net/cygjdjru/

见：https://vuejs.org/v2/guide/render-function.html#Functional-Components

在您的情况下，如果您不希望样式具有响应性，那么我猜您只是想传递一个道具

Vue.component('message', {
  functional: true,
  render(createElement, context) {
    return createElement('h1', context.props.foo)
  },
  props: {
    foo: {
      required: true
    }
  }
});

见：https://jsfiddle.net/qhzh0a2c/

【讨论】：

谢谢！这澄清了很多:)