[TOC] ### 1. 模板文件 說明：子組件中的事件傳給父組件中處理和小程序中的triggerevevt作用相同 this.$emit('delete',{}) ~~~ <template> <div @click="handleClick"> 我是子組件我要向父組件傳參 </div> </template> <script> export default { name:"MovieItem", }, methods:{ handleClick(){ // 子組件自定義事件,向父組件傳參 this.$emit("jump",this.movie.id) } } } </script> ~~~ ### 2. Home.vue 父組件接收參數 ~~~ <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> ~~~ ### 3. 事件處理 ~~~ import axios from "axios-jsonp-pro"; export default { name: "home", methods:{ onJump(id){ this.$router.push('/about/'+id); }, } }; ~~~ ### 5. 在路由中配置 傳遞的id ~~~ export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/about/:id', name: 'about', component: () => import('./pages/About.vue') } ] }) ~~~