1.组件可以由内部的Data提供数据展示，也可以由父组件ajax取到数据后通过prop的方式传值进子组件。
样例:
子组件电影组件，展示标题和评分，声明属性props:["title","rating"]
<template>
<div>
<h1>{{title}}</h1>
<span>{{rating}}</span>
</div>
</template>
<script>
export default {
name: 'Movie',
props:["title","rating"],
data () {
return {
}
}
}
</script>
<style >
</style>父组件App.vue用到电影组件，取到数据后通过属性赋值到子组件Movie.vue
<template>
<div id="app">
<!-- <img src="./assets/logo.png"> -->
<!-- <router-view/> -->
<First/>
<Movie title="金刚狼" rating="8.8"></Movie>
<Movie v-for="movie in movies" :title="movie.title" :rating="movie.rating" :key="movie.id" ></Movie>
</div>
</template>
<script>
import First from '@/components/First.vue'
import Movie from '@/components/Movie.vue'
export default {
name: 'App',
data:function(){
return {
movies:[
{id:1,title:"金刚狼",rating:"8.8"},
{id:2,title:"金刚狼2",rating:"8.9"},
{id:3,title:"金刚狼3",rating:"9.0"},
]
}
},
components:{
First,
Movie
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
效果：
