1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 1. Import packages Vue<! -9 --> 10 <script src=" https://cdn.jsdelivr.net/npm/vue"></script> 11 </head> 12 13 <body> 14 <div id="app"> 15 <com1 v-bind:parentmsg="msg" @func="getMsgFormSon"></com1> 16 </div> 17 18 <template id="tmp1"> 19 <div> 20 < H1 of > which is a child element parentmsg {} {} --- </ h1 of > 21 is < INPUT type = "Button" value = "message is transmitted to the parent element" @click = "SENDMSG" > 22 is </ div > 23 is < / Template > 24 25 < Script > 26 is 27 var COM1 = { 28 Template: ' # TMP1 ' , 29 Data () { 30 return { 31 is MSG:' Make a filial child paper, give some money to the parent component to squander it! ' 32 } 33 is }, 34 is The props: [ ' parentmsg ' ], 35 Methods: { 36 SENDMSG () { 37 [ the this . $ EMIT ( ' FUNC ' , the this a .msg) 38 is } 39 } 40 } 41 is 42 is // Create Vue example, to obtain the ViewModel 43 is var VM = new new Vue ({ 44 is EL: ' #app' , 45 Data: { 46 is MSG: ' This is the data in the parent element ' , 47 msgFormSon: ' ' 48 }, 49 Methods: { 50 getMsgFormSon (Data) { 51 is the this .msgFormSon = Data 52 is the console.log ( the this . msgFormSon) 53 is } 54 is }, 55 Components: { 56 is COM1 57 is } 58 }); 59 </script> 60 </body> 61 </html>