vue中 emit實(shí)現(xiàn)原理是什么

看到vue子組件像父組件傳遞數(shù)據(jù)的方式是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <!-- 子組件向父組件傳遞數(shù)據(jù) -->
    <div id="box">
        <v-parent></v-parent>
    </div>

    <!-- 父組件模板 -->
    <template id="parent">
        <div>
            <span>{{msgParent}}</span>
            <v-child @child-info="get"></v-child>
        </div>
    </template>

    <!-- 子組件模板 -->
    <template id="child">
        <div>
            <button @click="send">send</button>
            <!-- <p>{{msgChild}}</p> -->
        </div>
    </template>
    <script type="text/javascript">
        var app = new Vue({
            el:'#box',
            components:{
                // 父組件
                'v-parent':{    
                    data() {
                        return {
                            msgParent:'hello'
                        }
                    },
                    template:'#parent',
                    methods:{
                        get(msg){
                            this.msgParent = msg 
                        }
                    },
                    // 子組件
                    components:{
                        'v-child':{            
                            data(){
                                return {
                                    msgChild:'child'
                                }
                            },
                            template:'#child',
                            methods:{
                                send(){
                                    this.$emit('child-info',this.msgChild)
                                }
                            }
                        }
                    }
                }
            }
        })
    </script>
    
</body>
</html>

看起來(lái)就是子組件設(shè)置點(diǎn)擊事件，然后傳值父組件用參數(shù)接收
那這個(gè)實(shí)現(xiàn)原理是什么是不是說(shuō)必須要點(diǎn)擊子組件才能進(jìn)行數(shù)據(jù)傳遞？

回答

編輯回答

賤人曾

https://github.com/vuejs/vue/...

2017年9月21日 23:11

編輯回答

維他命

因?yàn)樽咏M件進(jìn)行傳值其父組件應(yīng)該有一個(gè)觸發(fā)條件
而去知道何時(shí)觸發(fā)可以進(jìn)行監(jiān)聽(tīng)在這里你可以使用點(diǎn)擊事件也可以是其他的事件
子組件向父組件傳遞值如果需要父組件去進(jìn)行顯示那么這個(gè)顯示條件或者說(shuō)值得獲取一定要有觸發(fā)的
而原理呢就是事件監(jiān)聽(tīng)
也可以說(shuō)是發(fā)布訂閱模式

2017年5月21日 20:29

編輯回答