<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div class="app"> <!-- 父組件向子組件傳遞方法，使用的是事件綁定機制，v-on 當我們自定義一個事件屬性之后，那么子組件就能夠通過某些方法來 調用，傳遞進去的這個方法了 --> <log v-bind:dataflog="msg" @funcshow="show" ></log> </div> <template id="log"> <div> <h1>這是子組件界面----{{dataflog}}</h1> <input type="button" @click="myclick" value="父組件傳遞過來的方法 子組件接收"> </div> </template> <script> var vm=new Vue({ el:'.app', data:{ msg:'看到數據了嘛' }, methods: { // 父方法接受參數 show(a){ console.log(a.name+'父組件方法'); }, }, components:{ log:{ template:'#log', props:['dataflog'], data(){ return { duwei:{name:'duwei',age:30} } }, methods: { myclick(){ // console.log('ok'); // 當點擊子組件按鈕的時候，如何拿到父組件傳遞過來的func 方法，並調用呢？ // emit英文願意：是觸發調用 發射的意思。 // this.$emit('funcshow') // emit傳遞父組件中的方法，並且子組件向父組件傳遞消息 // this.$emit('funcshow',123,345) this.$emit('funcshow',this.duwei); }, }, }, } }) </script> </body> </html>