vue组件拆分的问题？

Question

最近在学vue，试着写个单页应用，在写组件，拆分组件时遇到一些困惑。
比如上图，我们可以把每个电影介绍分装成一个组件card-item，使用组件时传入一个对象，包含电影的各种信息

<card-item :item="movie"></card-item>

<template>
 <router-link :to="{name: 'movie-detail', params:{id: item.id}}" class="item">
    <div class="cover">
      <div class="wp">
        <img :src="item.images.medium">
      </div>
    </div>
    <div class="info">
      <p>{{item.title}}</p>
    </div>
  </router-link>
</template>
<script>
  export default {
    props: ['item']
  }
</script>

现在我要渲染多个card-item，是这样直接写

<div class="card">
  <card-item v-for="movie in movies" :item="movie">
</div>

还是在把外面的.card再拆成一个组件card，这样更好？

<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

<card>
  <card-item v-for="movie in movies" :item="movie">
</card>

又或者是把movies数组传给card组件，然后由card自己循环，然后把每个movie传给card-item?

<template>
  <div class="card">
    <card-item :item="movie" v-for="movie in movies"></card-item>
  </div>
</template>
<script>
  import CardItem from './card-item'
  export default {
  props: ['movies'],
    components: {
      CardItem
    }
  }
</script>

<card :movies="movies"></card>

到底哪种方式才是正确的？
大家平时是怎么拆分组件的？

Answer 1

我也写了一个豆瓣电影的demo，基于浏览器和服务端的都有，楼主可以参考：vuejs 服务端渲染豆瓣电影的demo： https://github.com/monkeyWang... 浏览器端渲染的demo：https://github.com/monkeyWang... 演示地址:http://139.199.163.228:8081

Answer 2

方案从来都不是固定的，没有正确错误之分，只有合适与不合适之别。这个场景下，只是纯粹的展示而已，并没有出现复杂的数据交互，各种写法之间其实差别不大。
从简洁的角度来考虑，方法一、三更合适，写起来最简单，读起来也最直观，容易理解。
至于一三之间的区别那就是要不要把整个列表拆出来作为一个独立组件，个人觉得还是拆开来比较好一点，这样整个页面的结构更加的清晰，也方便后面扩展。