Question

我并不真正了解将function() { return {} }置于何处以及何时不深入嵌套计算属性。

顺便说一下，这是一个组件！

computed: {
        styles: function() {
            return {
                slider: function() {
                    return {
                        height: {
                            cache: false,
                            get: function() {
                                return 'auto';
                            }
                        },
                        width: {
                            cache: false,
                            get: function() {
                                return $('#slideshow').width();
                            }
                        }
                    }
                }
            }
        }
    },

这是返回undefined。当我摆脱滑块索引中的function() { return {} }时，它会在我styles.slider.width而不是get()返回时返回一个对象。它只显示一个带缓存的对象并获取索引..

感谢您的帮助！

我问的原因是因为我有多个嵌套组件涉及来自父级的样式。滑块，标签，旋转木马等等所以我想像这样组织它们。

Answer 1

我相信您的意思是返回一个计算对象，但实际上不是以嵌套的方式构造计算吗？

其他人关于没有嵌套语法的“计算”挂钩的说法是正确的，您可能需要以不同的方式构造它。

这可能对您有用：我以类似的方式生成许多对象。

computed: {
   computedStyles(){
     var style = {slider:{}}
     style.slider.height = 'auto'
     style.slider.width = this.computedSlideshowWidth
     return style
   },
   computedSlideshowWidth(){
     return $('#slideshow').width()    
   }

Answer 2

根据2020年和Vue 2.6.12，这是完全可能的。我相信从v.2起已经可以这样做，但无法确认。

这是工作示例：

Widget technicianCard

请注意：

自Vue v.2 this.computed = { // One level deep nested, // get these at `iscomplete.experience` // or `iscomplete.volume` iscomplete: function() { return { experience: this.$data.experience !== null, volume: this.$data.volume > 100, // etc like this }; }, // More levels deep nested. // Get these at `istemp.value.v1 and `istemp.value.v2` istemp: function() { return { value1: { v1: this.$data.experience, v2: 'constant' } } } };键以来已弃用；
Vue不会执行分配给cache对象嵌套键的函数；
您无法针对非Vue反应性的事物进行计算，例如computed。

除此之外，我发现嵌套的计算有时对使事情保持井井有条非常有帮助。

Vuejs深嵌套计算属性

2 个答案: