Question

我是VueJS.2中的新手，今天与VueJS Components合作。

所以，我最终得到了这个.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或其他？如果是，那么如何？

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

1：如何获得height的{{1}}，这样，如果孩子ul.icons的总体身高更高，则更新li.app ＆安培;来自top的{{1}}样式。

2：如何从外部组件添加和重新设置left（style method）样式？

谢谢＆amp;此致

Answer 1

您可以cc = np.corrcoef(y, y2, rowvar=False) ref上<ul> <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

祝你好运

VueJS嵌套组件：最佳实践

2 个答案: