最近在学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>
到底哪种方式才是正确的?
大家平时是怎么拆分组件的?
我也写了一个豆瓣电影的demo,基于浏览器和服务端的都有,楼主可以参考:vuejs 服务端渲染豆瓣电影的demo: https://github.com/monkeyWang... 浏览器端渲染的demo:https://github.com/monkeyWang... 演示地址:http://139.199.163.228:8081