Vuejs 深层嵌套计算属性

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

这返回未定义。当我摆脱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()    
   }