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> 9 <!--1.导入Vue的包--> 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>这是子元素 --- {{parentmsg}}</h1> 21 <input type="button" value="向父组件传递消息" @click="sendMsg"> 22 </div> 23 </template> 24 25 <script> 26 27 var com1={ 28 template:'#tmp1', 29 data(){ 30 return{ 31 msg:'做一个孝顺的孩纸，给父组件一些钱去挥霍吧！' 32 } 33 }, 34 props:['parentmsg'], 35 methods:{ 36 sendMsg(){ 37 this.$emit('func',this.msg) 38 } 39 } 40 } 41 42 //创建 Vue 实例，得到 ViewModel 43 var vm = new Vue({ 44 el:'#app', 45 data:{ 46 msg:'这是父组件中的数据', 47 msgFormSon:'' 48 }, 49 methods:{ 50 getMsgFormSon(data){ 51 this.msgFormSon=data 52 console.log(this.msgFormSon) 53 } 54 }, 55 components:{ 56 com1 57 } 58 }); 59 </script> 60 </body> 61 </html>