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

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

render(createElement, context) {

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

            ]
        )

    },

---

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

功能组件没有状态，因此计算属性是冗余的。在下面的示例中，我正在创建一个标题组件，当单击时，它在

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
    }
  }
});

正如您所见，标头值基于计算的值，它工作正常，因为它不是功能组件，因此可以具有以下状态：

如果我通过添加

functional:true

使其成为一个功能组件，那么它将不起作用，因为它的显示依赖于具有以下状态的组件：

见：

在你的情况下，如果你不想让风格反应，那么我猜你只是想传递一个道具

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

---

请参阅：

使用

this.style

访问渲染函数中的计算值我忘了提到我在组件中添加了“functional:true”，我相信这是使组件反应所必需的。从现在起，计算值更改时内容不会更改。谢谢！这澄清了很多：）