gpt4 book ai didi

vue.js - VueJS : How to access computed values in render function

转载 作者:搜寻专家 更新时间:2023-10-30 22:34:33 26 4
gpt4 key购买 nike

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

render(createElement, context) {

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

]
)

},

并且我添加了 functional: true。 “样式”是一个计算值,但它似乎没有随上下文对象一起传递。有什么方法可以访问 Vue 渲染函数中的计算值吗?

最佳答案

功能组件没有状态,因此计算属性是多余的。在下面的示例中,我创建了一个 header 组件,它在单击时在 foobar 之间切换:

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

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

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

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

在你的情况下,如果你不是在寻找响应式(Reactive)风格,那么我猜你只是想传递一个 Prop

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

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

关于vue.js - VueJS : How to access computed values in render function,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46910101/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com