【19】vue.js — 父子元件

有心部落格發表於2017-09-08
Vue.js元件

父子元件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id="box">
            <aaa>
            </aaa>
        </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
            },
            components: {
                //父元件
                'aaa': {
                    //使用子元件
                    template: '<h2>我是aaa元件</h2><bbb></bbb>',
                    //子元件
                    components: {
                        'bbb': {
                            template: '<h3>我是bbb元件</h3>'
                        }
                    }
                }
            }
        });
    </script>
</html>

vue父子元件

子元件使用父元件資料

vue預設情況下，子元件沒法訪問父元件資料的，我們需要藉助元件的props屬性來繫結資料，使用props時注意html轉js命名轉換是使用駝峰轉換的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        <style>
        </style>
    </head>
    <body>
        <div id="box">
            <aaa>
            </aaa>
        </div>
        <template id="aaa">
            <span>我是父級 -> {{msg}}</span>
            <bbb @child-msg="get"></bbb>
        </template>
        <template id="bbb">
            <h3>子元件 ---> </h3>
            <input type="button" value="send" @click="send" />
        </template>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            data:{
            },
            components:{
                'aaa': {
                    data() {
                        return {
                            msg: 111,
                            msg2: '我是父元件的資料'
                        }
                    },
                    template: '#aaa',
                    methods: {
                        get(msg) {
                            this.msg = msg;
                        }
                    },
                    components: {
                        'bbb': {
                            data() {
                                return {
                                    a: '我是子元件的資料'
                                }
                            },
                            template: '#bbb',
                            methods: {
                                send() {
                                    alert("子元件點選了");
                                    //點選按鈕，觸發註冊在子元件上面的'child-msg'方法
                                    this.$emit('child-msg',this.a);
                                }
                            }
                        }
                    }
                }
            }
        });
    </script>
</html>

點選【子元件】中的按鈕，然後呼叫【子元件】觸發函式$emit到【父元件】方法中，以此方式將【子元件資料】傳遞到【父元件】中。

父元件呼叫子元件資料前

父元件呼叫子元件資料後

相關文章