Question

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

render(createElement, context) {

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

            ]
        )

    },

我添加了功能：true。＆＃34;风格＆＃34;是一个计算值，但它似乎没有与上下文对象一起传递。有没有办法在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/

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

1 个答案: