VueJS：如何访问渲染函数中的计算值

Question

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

render(createElement, context) {

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

            ]
        )

    },

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

Answer 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/