VueJS嵌套组件：最佳实践

Question

我是VueJS.2的新手，现在正在使用VueJS组件。

所以，我结束了这个.vue组件：

<template> 
    <div class="apps"> 
    <ul class="icons"> 
     <li v-for="app in apps" class="app" :style="style"> 
     <div :class="icon(app)"></div> 
     <div class="name">{{app}}</div> 
     </li> 
    </ul> 
    </div> 
</template> 

<script> 
    export default { 
    name: 'desktop-apps', 
    data() { 
     return { 
     apps: ['Txt File', 'Img File', ...], 
     top: 0, 
     left: 0 
     } 
    }, 
    methods: { 
     icon (name) { 
     return 'icon ' + name.toLowerCase().replace(/ /g, '_') 
     }, 
     style() { 
     var _top = this.top 
     var _left = this.left 
     return 'top:' + _top + 'px;left:' + _left + 'px;' 
     } 
    } 
    } 
</script> 

<style> 
    // li has position:absolute and vertically rendered 
</style> 

该组件运行良好......

我想知道，这个代码是好还是可以即兴（通过compute什么？其他 如果是，那么如何

另外，我要说明的2个问题：

1：H我可以得到height的ul.icons，这样，如果子女li.app的整体高度比更新top & left风格style method。

2：如何从外部组件添加和重新设计app（li.app）？

感谢&问候

Answer 1

您可以在<ul>宠ref这样<ul class="icons" ref='icon'>

，然后返回高度：

this.$refs.icon.offsetHeight 

Answer 2

通常风格进入计算，并可以返回JSON提高可读性如

computed: { 

    style() { 

    return { 'top': this.top, 'left': this.left } 
    } 
} 

https://vuejs.org/v2/style-guide/#Priority-A-Essential

祝您好运