源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>VueComponent</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            关于VueComponent：
                1.school组件本质是一个名为VueComponent的构造函数，该函数 不是 程序员定义的，而是 Vue.extend生成的。

                2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建 school组件 的实例对象，
                    即 Vue 帮我们执行的：new VueComponent(options)。

                3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent //★★★ 即：一个新的实例化对象

                4.关于this指向：
                    (1).组件配置中：
                        data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
                    (2).new Vue(options)配置中：
                        data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

                5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）//★★★
                    Vue的实例对象，以后简称vm。
        -->
        <!-- 准备好一个容器-->
        <div id="root">
            <school></school>
            <hello></hello>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false

        //定义 school组件
        //    school组件的本质是什么?是数组啊，还是对象，或者是其它东西?  我们可以下面通过 console.log(school) 看一下。
        const school = Vue.extend({
            name:'school',
            template:`
                <div>
                    <h2>学校名称：{{name}}</h2>    
                    <h2>学校地址：{{address}}</h2>

                    <button @click="showName">点我提示学校名</button>
                </div>
            `,
            data(){
                return {
                    name:'尚硅谷',
                    address:'北京'
                }
            },
            methods: {
                showName(){
                    //this: 在 school组件中，指向的是 VueComponent实例对象
                    console.log('showName',this)
                }
            },
        })

        const test = Vue.extend({
            template:`<span>atguigu</span>`
        })

        //定义 hello组件
        const hello = Vue.extend({
            template:`
                <div>
                    <h2>{{msg}}</h2>
                    <test></test>    
                </div>
            `,
            data(){
                return {
                    msg:'你好啊 - SofTool.CN'
                }
            },
            components:{test}
        })

        //我们看看 school的本质: 是一个名为 VueComponent()的 构造函数。
        // console.log('@',school)
        // console.log('#',hello)

        //创建vm
        const vm = new Vue({
            el:'#root',
            components:{
                school,
                hello
            }
        })
    </script>
</html>

如何体现 vm 管理着 各个 vc 呢?

运行上面源码之后，在控制台输入 vm 回车查看：

057_VueComponent构造函数 - 图1