子元件給父元件傳資料

Dus發表於2018-11-20
元件

父元件訪問子元件的資料

a)在子元件中使用vm.$emit(事件名,資料)觸發一個自定義事件，事件名自定義
b)父元件在使用子元件的地方監聽子元件觸發的事件，並在父元件中定義方法，用來獲取資料
總結：子元件通過events給父元件傳送訊息，實際上就是子元件把自己的資料傳送到父元件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子元件及元件間資料傳遞</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <my-hello></my-hello>
    </div>
    
    <template id="hello">
        <div>
            <h3>我是hello父元件</h3>
            <h3>訪問自己的資料：{{msg}},{{name}},{{age}},{{user.username}}</h3>
            <h3>訪問子元件的資料：{{sex}},{{height}}</h3>
            <hr>

            <my-world :message="msg" :name="name" :age="age" @e-world="getData"></my-world>
        </div>
    </template>

    <template id="world">
        <div>
            <h4>我是world子元件</h4>
            <h4>訪問父元件中的資料：{{message}},{{name}},{{age}},{{user.username}}</h4>
            <h4>訪問自己的資料：{{sex}},{{height}}</h4>
            <button @click="send">將子元件的資料向上傳遞給父元件</button>
        </div>
    </template>

    <script>
        var vm=new Vue({ //根元件
            el:'#itany',
            components:{
                'my-hello':{  //父元件
                    methods:{
                        getData(sex,height){
                            this.sex=sex;
                            this.height=height;
                        }
                    },
                    data(){
                        return {
                            msg:'網博',
                            name:'tom',
                            age:23,
                            user:{id:9527,username:'唐伯虎'},
                            sex:'',
                            height:''
                        }
                    },
                    template:'#hello',
                    components:{
                        'my-world':{ //子元件
                            data(){
                                return {
                                    sex:'male',
                                    height:180.5
                                }
                            },
                            template:'#world',
                                                                        methods:{
                                send(){
                                    // console.log(this);  //此處的this表示當前子元件例項
                                    this.$emit('e-world',this.sex,this.height); //使用$emit()觸發一個事件，傳送資料
                                }
                            }
                        }
                    }
                }
            }
        }); 
    </script>
</body>
</html>

相關文章