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

祝您好運