子組件向父組件通信主要通過自定義事件實現。
這里我記錄一個小例子來幫助自己記憶。
通過點擊子組件的按鈕去執行父組件的函數並使用子組件傳來的數據。
子組件定義如下:
<template id="temp"> <div> <button v-for="item in game" @click="itemclick(item)">{{item.name}}</button> </div> </template> const cpn={ template:'#temp', data(){ return { game:[ {id:1,name:'英雄聯盟'}, {id:2,name:'地下城'}, {id:3,name:'空洞騎士'}, {id:4,name:'絕地求生'} ] } }, methods:{ } }
這里我直接將vue實例作為了父組件：
const app = new Vue({ el:'#div1', data:{ }, methods:{ }, components:{ cpn } })
由於程序簡單，運行界面上只顯示了幾個按鈕：
然后再為子組件添加函數：
itemclick(item){ // 使用$emit發射一個自定義事件，第一個參數是事件名稱，第二個參數是默認傳遞參數 this.$emit('cpnclick',item) }
從上面的模板可以看出這個函數再按鈕點擊時執行。在這個函數中，使用$emit方法發射了一個事件，事件名稱為第一個參數：'cpnclick'，第二個參數為該事件觸發時傳遞的默認參數。
然后，在使用組件的html代碼中用v-on指令監聽這個事件：
<div id="div1"> <!-- 此處v-on指令綁定的事件便是之前emit發射的自定義事件，后面執行的函數為父組件中的函數 --> <cpn @cpnclick="Cpnclick"></cpn> </div>
並在父組件中添加函數Cpnclick（注意這個C大寫不是之前那個cpnclick）：
Cpnclick(item){ alert('接收到'+item.name) }
在監聽到事件時參數item會自動接受到前面傳來的默認參數
運行效果：
完整代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <div id="div1"> 10 <!-- 此處v-on指令綁定的事件便是之前emit發射的自定義事件，后面執行的函數為父組件中的函數 --> 11 <cpn @cpnclick="Cpnclick"></cpn> 12 </div> 13 14 15 16 17 <template id="temp"> 18 <div> 19 <button v-for="item in game" @click="itemclick(item)">{{item.name}}</button> 20 </div> 21 </template> 22 <script src="vue.js"></script> 23 <script> 24 25 const cpn={ 26 template:'#temp', 27 data(){ 28 return { 29 game:[ 30 {id:1,name:'英雄聯盟'}, 31 {id:2,name:'地下城'}, 32 {id:3,name:'空洞騎士'}, 33 {id:4,name:'絕地求生'} 34 ] 35 } 36 }, 37 methods:{ 38 itemclick(item){ 39 // 使用$emit發射一個自定義事件，第一個參數是事件名稱，第二個參數是默認傳遞參數 40 this.$emit('cpnclick',item) 41 } 42 } 43 } 44 45 const app = new Vue({ 46 el:'#div1', 47 data:{ 48 49 }, 50 methods:{ 51 Cpnclick(item){ 52 alert('接收到'+item.name) 53 } 54 }, 55 components:{ 56 cpn 57 } 58 }) 59 </script> 60 </body> 61 </html>