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 <script src="./lib/vue-2.4.0.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <!-- 父組件向子組件 傳遞 方法，使用的是 事件綁定機制； v-on, 15 當我們自定義了 一個 事件屬性之后，那么，子組件就能夠，通過某些方式，來調用 傳遞進去的 這個 方法了 --> 16 <com2 @func123="show"></com2> 17 </div> 18 19 <template id="tmpl"> 20 <div> 21 <h1>這是子組件</h1> 22 <input type="button" value="這是子組件中的按鈕 - 點擊它，觸發 父組件傳遞過來的 func 方法" @click="myclick"> 23 </div> 24 </template> 25 26 <script> 27 // 定義了一個字面量類型的 組件模板對象 28 var com2 = { 29 template: '#tmpl', // 通過指定了一個 Id, 表示 說，要去加載 這個指定Id的 template 元素中的內容，當作 組件的HTML結構 30 data() { 31 return { 32 sonmsg: '子組件中data中的數據' 33 } 34 }, 35 methods: { 36 myclick() { 37 // 當點擊子組件的按鈕的時候，如何 拿到 父組件傳遞過來的 func 方法，並調用這個方法？？？ 38 // emit 英文原意： 是觸發，調用、發射的意思 39 // this.$emit('函數名稱', 參數, 參數) func123是 40 this.$emit('func123', this.sonmsg) 41 } 42 } 43 } 44 // 創建 Vue 實例，得到 ViewModel 45 var vm = new Vue({ 46 el: '#app', 47 data: { 48 datamsgFormSon: '父組件中的數據' 49 }, 50 methods: { 51 show(data) { 52 alert('調用了父組件身上的 show 方法: --- ' + this.datamsgFormSon) 53 this.datamsgFormSon = data 54 alert('調用了父組件身上的 show 方法: --- ' + this.datamsgFormSon) 55 } 56 }, 57 components: { 58 com2 59 } 60 }); 61 </script> 62 </body> 63 64 </html>