vuejs子組件向父組件傳遞數據

本文轉載自查看原文 2017-03-26 00:00 9544 vue

子組件通過$emit方法向父組件發送數據，子組件在父組件的模板中，通過自定義事件接收到數據，並通過自定義函數操作數據

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <!-- 子組件向父組件傳遞數據 -->
    <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>

此時點擊子組件模板中的按鈕，父模板中的子組件會接受到數據

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vuejs動態組件給子組件傳遞數據 vue 父組件傳遞數據給子組件 Vue子組件向父組件傳遞數據 vuejs2.0子組件改變父組件的數據 vue 父向子組件傳遞數據，子組件向父組件傳遞數據方式 vuejs利用props，子組件修改父組件的數據，父組件修改子組件的的數據，數據類型為數組 VUE中父組件向子組件傳遞數據 props使用 vue 父組件通過props向子組件傳遞數據/方法的方式 Vue實現子組件監聽父組件傳遞的數據變化子組件調用父組件的方法並傳遞數據