父组件和子组件的区分

1.在Vue实例app中注册组件

        <script type="text/javascript">
            /*创建组件构造器1*/
            const cpnC1 = Vue.extend({
                template: `
                <div>
                    <h2>我是组件1</h2>
                </div>
                `
            })
            
            /*创建组件构造器2*/
            const cpnC2 = Vue.extend({
                template: `
                <div>
                    <h2>我是组件2</h2>
                </div>
                `
            })
            
            /*创建Vue实例*/
            /*注册组件cpnC1*/
            /*注册组件cpnC2*/           
            const app = new Vue({
                el: '#app',
                components: {
                    cpn1:cpnC1,
                    cpn2:cpnC2
                }
            })          
        </script>

在html中使用组件cpn1和cpn2

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

image.png

2.父子组件引入

如果将组件1注册在组件2的构造器中，并在组件2的tmplate中使用组件1，在Vue实例中值注册组件2，在html中使用组件cpn2会怎么样？
组件构造器中也有components属性，可以在该属性中注册其他组件
1.在组件构造器2中注册并使用组件1

            /*创建组件构造器1*/
            const cpnC1 = Vue.extend({
                template: `
                <div>
                    <h2>我是组件1</h2>
                </div>
                `
            })

            /*创建组件构造器2*/
            const cpnC2 = Vue.extend({
                template: `
                <div>
                    <h2>我是组件2</h2>
                    <cpn1></cpn1>
                </div>
                `,
                components: {
                    cpn1: cpnC1
                }
            })

image.png

2.在Vue实例中只注册组件2

            const app = new Vue({
                el: '#app',
                components: {
                    cpn2:cpnC2
                }
            })  

3.在html中使用组件2

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

image.png

3.父组件和子组件是谁？

因为组件1在组件2构造器中注册，
并在组件2构造器template中使用，
即使组件1并没有在Vue实例中注册，也没有在html中使用，
但是，组件1存在在组件2的模板中，会被一起展示到html中。
所以，
组件2是父组件，
组件1是子组件

image.png