[TOC] ### 1. 父組件在使用模板時傳參 說明：父組件中將參數傳遞給子組件達到頁面渲染的目的 ~~~ <template> <div class="home"> <!-- :movie="item"為定義一個movie來傳參 需要在子組件注冊--> <!-- @jump="onJump"為子組件傳遞過來的事件名稱 --> <movie-item v-for="(item,index) of movies" :key="index" :movie="item" @jump="onJump"></movie-item> </div> </template> <script> //使用axios 要進行引入 import MovieItem from "../components/MovieItem"; import axios from "axios-jsonp-pro"; export default { name: "home", //vue data方法中要有return data() { return { movies:[] }; }, //注冊組件 components:{ MovieItem }, mounted(){ var url = "https://douban.uieee.com/v2/movie/top250"; axios.jsonp(url).then(res=>{ this.handleData(res); }) }, methods:{ onJump(id){ //使用路由進行頁面之間的跳轉并傳遞參數 要在路由文件中添加 this.$router.push('/about/'+id); }, handleData(res){ var subjects = res.subjects; var movies=[]; subjects.forEach(item=>{ var temp ={ id:item.id, imageUrl:item.images.small, title:item.title } movies.push(temp); }) this.movies = movies; } } }; </script> <style lang="scss" scoped> .home{ padding:20px; max-width: 748px; margin-left: auto; margin-right: auto; display: flex; flex-wrap: wrap; justify-content: space-between; } </style> ~~~ ### 2. 子組件對傳來的參數注冊 （在props 中） ~~~ <template> <div class="container" @click="handleClick"> <img :src="movie.imageUrl" alt=""> <p>{{movie.title}}</p> </div> </template> <script> export default { name:"MovieItem", //傳遞過來的參數要在props中注冊 //（也可寫成數組 props:['movie','cities']） props:{ movie:{ type:Object } }, methods:{ handleClick(){ // 子組件自定義事件,向父組件傳參 this.$emit("jump",this.movie.id) } } } </script> <style lang="scss" scoped> .container{ img{ width:150px; } font-size: 14px; box-shadow: 0 0 5px 3px rgba(51, 51, 51, 0.26); margin-top: 20px; } </style> ~~~