父子组件

模板上：

    <div id="box">
        <!-- 使用组件aaa -->
        <aaa></aaa>
    </div>

我们给aaa组件里套一个子组件bbb:

        var vm = new Vue({
            el:'#box',
            components:{
                'aaa':{
                    template: '<h2>我的aaa组件,我有子组件bbb<bbb></bbb></h2>',
                    components:{
                        'bbb':{
                            template: '<h3>我是bbb组件</h3>',
                        }
                    }
                },
            }
        });

注意，要在aaa的template中使用bbb组件：<bbb></bbb>。

父子组件数据传递

        var vm = new Vue({
            el:'#box',
            components:{
                'aaa':{
                    data(){
                        return {msg:'我是aaa组件的数据'}
                    },
                    template: '<div> aaa组件==> {{msg}} <bbb></bbb><div>',
                    components:{
                        'bbb':{
                            template: '<h3>我是bbb组件,{{msg}}</h3>',
                        }
                    }
                },
            }
        });

父组件aaa定了个数据msg，但数据是没有继承关系的，在子组件bbb中并不能使用。

父组件成功输出了自己的数据，子组件报错：找不到msg。

组件之间如何通信

我们先来看一下模板的另一种写法：

    <div id="box">
        <!-- 使用组件aaa -->
        <aaa></aaa>
    </div>

    <!-- 我们把组件模板抽离出来 -->
    <template id="aaa">
        <h1>aaaaaaa</h1>
    </template>

    <script type="text/javascript">
        var vm = new Vue({
            el:'#box',
            components:{
                'aaa':{
                    data(){
                        return {msg:'我是aaa组件的数据'}
                    },
                    template: '#aaa',
                },
            }
        });
    </script>

上面代码，把组件模板部分抽离出去了：

    <template id="aaa">
        <h1>aaaaaaa</h1>
    </template>

然后在组件里设置:template: '#aaa'。

这样写代码更加简洁了。

同样还是可以嵌套子组件：

    <div id="box">
        <!-- 使用组件aaa -->
        <aaa></aaa>
    </div>

    <!-- 我们把组件模板抽离出来 -->
    <template id="aaa">
        <!-- 小细节：要在组件里嵌套子组件的话，需要"包"起来 -->
        <div>
            <h1>aaaaaaa</h1>
            {{msg}}
            <hr>
            <bbb></bbb>
        </div>
    </template>

    <script type="text/javascript">
        var vm = new Vue({
            el:'#box',
            components:{
                'aaa':{
                    data(){
                        return {msg:'我是aaa组件的数据'}
                    },
                    template: '#aaa',
                    components:{
                        'bbb':{
                            template:'<span>我是bbb</span>'
                        }
                    }
                },
            }
        });
    </script>

子组件就是想获取父组件的data

props:[ ]

1.给子组件定义属性props用来接收父组件传递过来的数据

'bbb':{
                            props:['m'],
                            template:'<span>我是bbb==> {{m}} </span>'
                        },

2.因为bbb组件是在aaa组件的模板上使用的，所以在模板上可以接收aaa的data

<bbb :m="msg"></bbb>

用定义的props接收父组件的数据。

3.完整代码如下：

    <div id="box">
        <!-- 使用组件aaa -->
        <aaa></aaa>
    </div>

    <!-- 我们把组件模板抽离出来 -->
    <template id="aaa">
        <!-- 小细节：要在组件里嵌套子组件的话，需要"包"起来 -->
        <div>
            <h1>aaaaaaa</h1>
            {{msg}}
            <hr>
            <bbb :m="msg"></bbb>
        </div>
    </template>

    <script type="text/javascript">
        var vm = new Vue({
            el:'#box',
            components:{
                'aaa':{
                    data(){
                        return {msg:'我是aaa组件的数据'}
                    },
                    template: '#aaa',
                    components:{
                        'bbb':{
                            props:['m'],
                            template:'<span>我是bbb==> {{m}} </span>'
                        },
                    }
                },
            }
        });
    </script>