父組件通過(guò)子組件的props屬性可以將父組件的數(shù)據(jù)傳送給子組件
子組件可以通過(guò)$emit()犁跪，將自定義事件傳遞給父組件

image.png

一.子組件需要傳遞自定義事件的場(chǎng)景

在紅色大組件中進(jìn)行網(wǎng)絡(luò)請(qǐng)求獲取數(shù)據(jù)嘲叔，通過(guò)子組件中props停局，將紅色組件中的數(shù)據(jù)傳遞給各個(gè)藍(lán)色組件。但是，當(dāng)我點(diǎn)擊左側(cè)邊藍(lán)色組件中的手機(jī)數(shù)碼時(shí)，該藍(lán)色組件要將點(diǎn)擊手機(jī)數(shù)碼的事件發(fā)送給紅色組件，紅色組件根據(jù)發(fā)送過(guò)來(lái)的事件再次發(fā)送網(wǎng)絡(luò)請(qǐng)求獲取手機(jī)數(shù)碼的數(shù)據(jù)套才，右側(cè)邊的組件又通過(guò)props獲取手機(jī)數(shù)碼的數(shù)據(jù)并展示。

image.png

二慕淡、子組件如何向父組件傳遞自定義事件

首先展示按鈕組件

        <div id="app">
            <cpn1></cpn1>
        </div>
        <template id="cpn1">
            <div>
                <!--在button中展示目錄的名字-->
                <button v-for="item in categories">{{item.name}}</button>       
            </div>
        </template>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            /*子組件構(gòu)造器*/
            const cpnC1 = Vue.extend({
                template:'#cpn1',
                data(){
                    return{
                        categories:[
                            {id:'001',name:'手機(jī)數(shù)碼'},
                            {id:'002',name:'電腦辦公'},
                            {id:'003',name:'家用電器'},
                            {id:'004',name:'美妝護(hù)膚'},
                        ]
                    }
                }
            })
            
            /*根組件*/
            const app = new Vue({
                el: '#app',
                components: {
                    cpn1:cpnC1
                }
            })
        </script>

image.png

1.當(dāng)點(diǎn)擊按鈕時(shí)觸發(fā)點(diǎn)擊事件背伴，在事件處理函數(shù)中向父組件發(fā)送自定義事件

image.png

2.在事件處理函數(shù)btnclick(item)中發(fā)送自定事件
$emit(自定義事件，參數(shù))

image.png

3.父組件監(jiān)聽(tīng)子組件傳遞的自定義事件

image.png

4.在父組件的methods中設(shè)置監(jiān)聽(tīng)到自定義事件的事件處理函數(shù)

image.png

全部過(guò)程：
點(diǎn)擊子組件的button觸發(fā)點(diǎn)擊事件峰髓，在點(diǎn)擊事件中發(fā)送自定事件傻寂，父組件對(duì)自定義事件進(jìn)行監(jiān)聽(tīng)，并在methods中處理自定義事件携兵，最后打印出當(dāng)前button的對(duì)象疾掰。

image.png