27VueComponent

VueComponent

一、 Vue.extend()返回值是什么？

Vue.extend 返回值是 VueComponent 构造函数 接收options后处理产生的VueComponent 实例化对象。

二、组件中的this是谁？

组件中的元素this是 VueComponent 实例对象

三、vm中的$children是什么？

vm中的$children 由 vm 管理的 VueComponent (组件), 
而 VueComponent(组件1) 下的 VueComponent(组件2)是由 上一级的VC（组件1)）管理的

总结

关于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>
    <button @click="consoleLogThis">点我测试vm this是谁</button>
</div>
<script>
    Vue.config.productionTip = false;


    // 三、 测试$children,中是否是由VueComponent组成
    const students = Vue.extend({
        template: `
            <div>
                <h3>{{studentName}}</h3>
                <h3>{{studentAge}}</h3>
            </div>    
        `,
        data() {
            return {
                studentName: "Redskaber",
                studentAge: 18
            }
        },
    });


    // 二、判断组件的this是谁？  VueComponent(Vue组件实例化对象) 
    const school = Vue.extend({
        template: `
            <div>
                <h3>{{schoolName}}</h3>
                <h3>{{schoolAddress}}</h3>
                <button @click="consoleLogThis">点我测试school this是谁</button>
                <students></students>
           </div>
        `,
        data() {
            return {
                schoolName: 'hniu.cn',
                schoolAddress: 'hnwc'
            }
        },
        methods: {
            consoleLogThis() {
                console.log('this school:', this)   // VueComponent 
            },
        },
        components: {
            students
        },
    });

    // 一、  输出一下 school 是什么？ VueComponent(options) {}    构造函数，此VueComponent,非彼VueComponent;
    // 可以通过源代码打断点测试。 VueComponent构造函数返回的实例对象（组件）
    // console.log('school:', school)


    // vm
    const vm = new Vue({
        el: '#root',
        components: {
            school,
        },
        methods: {
            // 三、 测试$children,中是否是由VueComponent组成
            consoleLogThis() {
                console.log('vm this:', this)
            },
        },
    });
</script>