Vue之父組件向子組件傳遞方法

二、父組件向子組件傳遞方法

    該問題可以理解為“子組件如何調用父組件的方法”，根據對父組件向子組件傳值過程的理解，該過程還是分為兩個步驟：

        1、父組件如何將方法傳給子組件？

        2、子組件如何獲取父組件傳過來的方法？

    解讀vue示例代碼：

        1、父組件通過“事件綁定機制”將方法傳給子組件。

        2、子組件在methods屬性中用this.$emit('func')獲取父組件傳遞的方法。

    過程分析：

        1、首先在定義的vue對象實例中定義一個show方法（第32行），然后我們通過components屬性將定義的子組件com2引用一下，在第2行以標簽的形式加以引用，在標簽里面用事件綁定機制將show綁定給func，此時已成功將父組件的show方法傳遞給了子組件com2；

        2、我們需要觸發並調用父組件傳遞過來的方法，在子組件com2的methods屬性中定義了點擊事件方法，點擊的時候通過this.$emit('func',this,sonmsg)獲取父組件的方法。

    注意：

        1、@func='show' 不是show()，表示將show()的引用直接給func，如果是show()表示將方法的結果給func，注意含義不一樣。

        2、this.emit()，emit()，emit是觸發的意思，第一個參數是父組件傳遞的方法名，從第二個參數開始可以傳遞額外的參數。

<div id='app'>
     <com2 @func='show'></com2>
 </div>

<template id='tem1'>
    <div>
        <h1>這是子組件</h1>
        <input type="button" value="子組件的按鈕，點擊調用父組件傳遞過來的func方法" @click='myclick'>
    </div>
</template>

//定義一個字面量類型的組件模板對象
var com2 = {
    tenplate:'#tem1',
    data(){
        return{
            sonmsg:{name:'son',age:6}
        }
    },
    methods:{
        myclick(){
           this.$emit('func’,this.sonmsg);
        }
    }
}

 var vm = new Vue({
     el:'#app',
     data:{
         data_form_son: ''
     },
     methods:{
        show(param){
            console.log("調用父組件的show方法"+JSON.stringify(param));
            this.data_form_son = JSON.stringify(param);
        }
    },
     components:{
         com2
     }
 })

 三、子組件通過事件調用向父組件傳值。

    看代碼22行，子組件調用父組件方法的時候將this.sonmsg傳遞，然后在33行在show方法里面傳參，35行就可以獲取值。