Javascript VueJS嵌套组件：最佳实践

我是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>

{{app}}


导出默认值{
名称：“桌面应用程序”，
数据（）{
返回{
应用程序：['Txt文件'，'Img文件'，…]，
排名：0，
左：0
}
},
方法：{
图标（名称）{
返回'icon'+name.toLowerCase（）.replace（//g，'.''
},
风格（）{
var\u top=this.top
var _left=这个
返回'top:'++'px；left:'++'px；'
}
}
}
//li具有位置：绝对和垂直渲染

这个组件工作得很好

我想知道这段代码是好的还是可以即兴编写（通过

compute

或其他什么？ 如果是的话，怎么办

另外，我想澄清另外两个问题：

1：如何获取

ul.图标的
高度
，以便在儿童
li.app
的总体高度大于时，从
样式方法
更新
顶部
和
左侧
样式

2：如何从外部组件添加和重新设置
app
（
li.app
）的样式

感谢和问候
您可以像这样抚摸

然后返回高度：

this.$refs.icon.offsetHeight

通常，样式进入computed，可以作为JSON返回，以提高可读性，例如

computed: {

  style () {

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


祝你好运
你的第一个问题（“[是]这个代码很好[？]”）可能太宽泛了。本网站针对的是更具体的问题，比如你的第二个问题。但你最好在本网站上为第二个问题创建两个单独的问题，这样以后人们就可以更容易地按标题搜索这些问题。@NathanWailes:谢谢你对sepa的建议给线程打分，但这两个问题是从这个线程的代码中继承的，所以我在这里问。无论如何，我会在下次处理这个问题。