Vue元件通訊之子傳父

阿新 • • 發佈：2020-07-19

子元件向父元件通訊主要通過自定義事件實現。

這裡我記錄一個小例子來幫助自己記憶。

通過點選子元件的按鈕去執行父元件的函式並使用子元件傳來的資料。

子元件定義如下:

    <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>