父子组件

父组件用子组件

1、创建子组件模块
2、在父组件中声明需要使用的子组件
3、在父组件中使用子组件

    <div id="app"></div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        <!-- 创建App子组件 -->
        var App = {
            template: '<h1>我是入口</h1>'
        }

        new Vue({
            el: '#app',
            <!-- 通过components函数声明需要使用的组件，key是组件名，value是组件对象，声明了App组件，组件名为hello -->
            components: {
                hello: App
            },
            <!-- 调用组件名为hello的子组件 -->
            template: '<hello/>'
        })
    </script>

父组件传子组件

1、父组件传子组件时通过属性传递
2、子组件要声明props[‘属性名’]来接收
3、接收后就可以仍以使用（再template中直接用，再js中this.属性名调用）
4、传递常量直接用，传递变量加冒号（通过v-bind指令）

    <div id="app"></div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        <!-- 创建一个Son1子组件 -->
        var Son1 = {
            template: `
                <div>
                    <!-- 通过插入表达式调用父组件传递的数据 -->
                    接收到父组件传递的值 {{ emmm }}
                </div>
            `,
            <!-- 通过props函数声明父组件传递的数据 -->
            props:['emmm']
        }

        var Father1 = {
            <!-- 先声明需要传值的子组件 -->
            components: {
                son: Son1
            },
            template: `
                <div>
                    <!-- 通过子组件的标签传值 -->
                    <!-- 通过v-bind指令向子组件的emmm属性绑定数据 -->
                    <son :emmm="xxx"></son>
                </div>
            `,
            data: function() {
                return {
                    xxx: '我是父组件'
                }
            }
        }

        new Vue({
            el: '#app',
            components: {
                hello: Father1
            },
            template: `<hello></hello>`
        })
    </script>