Vue和VueComponent

关于VueComponent:

1.一个组将名叫school，组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
2.我们只需要写，vue解析时会帮我们创建school组件的实例对象，即Vue会帮我们执行：new VueComponent(options)
3.VueComponent的实例对象，简称vc也可称之为组件实例对象
4.Vue的实例对象简称vm

this指向:

组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是[VueComponent实例对象]
new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是[Vue实例对象]。

 <div class="app">
        <button @click="vm">点我vm看控制台</button>
        <!-- 使用组件 -->
        <school></school>
    </div>
    <script>
        // 定义一个组件
        const school = {
            template:`
            <div>
                <button @click="vc">点我vc看控制台</button>
                <button @click="schoolInfo">点我提示学校信息</button> 
            </div>
            `,
            data() {
                return {
                    name:'B站'
                }
            },
            methods: {
                schoolInfo(){
                    alert(this.name)
                },
                vc(){
                    console.log("组件中",this);
                }
            },
        }
        new Vue({
            el:'.app',
            components:{
                // 注册组件
                school
            },
            methods:{
                vm(){
                    console.log("vue中",this);
                }
            }
        })
    </script>

效果图

点击vm按钮
点vc按钮
点击提示学校信息按钮