vue-父組件向子組件傳值

一、父組件向子組件傳值

    其實該問題是說子組件如何訪問父組件的屬性和方法？那么根據對組件化的理解，無非就是要解決兩個問題：

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

        2、子組件如何獲取父組件傳遞過來的值？

    解讀vue示例代碼：

        1、父組件向子組件傳值是通過“屬性綁定”的形式實現的（第2行）

        2、子組件默認是無法訪問到父組件中的數據和方法的（如果去掉19行，18行是取不到數據的，瀏覽器還會報錯）

    過程分析：

        1、首先，第2行是引用子組件對象模板，通過屬性綁定的方式將父組件的msg綁定給自定義的屬性名稱parentmsg，這一步已經把父 組件的值傳給了子組件；

        2、看代碼vue中是通過在子組件中定義props屬性，並將綁定的屬性名傳進去就可以獲取到父組件傳過來的值。

        關鍵字：屬性綁定 、 props

    注意：

        1、子組件data里面的數據是子組件私有的，可讀可寫。

        2、組建中props種的數據都是通過父組件傳遞過來的，可讀不可寫。

<div id='app'>
    <com1 :parentmsg='msg'></com1>
</div>


var vm = new Vue({
    el:'#app',
    data:{
        msg: '這是父組件中的數據'
    },
    methods:{},
    //定義子組件
    components:{
        com1:{
            data(){
                return {title:'子組件',content:'這是子組件內容'}
            },
            template:'<h1>這是子組件--{{parentmsg}}</h1>',
            props:['parentmsg']
        }
    }        
})

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

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

        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是觸發的意思，第一個參數是父組件傳遞的方法名，從第二個參數開始可以傳遞額外的參數。

 

 <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行就可以獲取值。（日后加以補充）