VueComponent

  <div class="root">
    <shool></shool>
    <hello></hello>
  </div>
  <script>
    const student = Vue.extend({
      template:`<h1>高高</h1>`,
    })
    const shool = Vue.extend({
      template:`<div>
        <h1>理工</h1>
        <student></student>
      </div>`,
      components:{
        student
      }
    })
    const hello = Vue.extend({
      template:`<h1>good</h1>` 
    })
    new Vue({
      el:'.root',
      components:{
        shool,
        hello
      }
    })
    // console.log("===>>>>",shool)
    // console.log(shool == hello)
  </script>

shool
//ƒ VueComponent (options) {
//        this._init(options);
//      }
student
//ƒ VueComponent (options) {
//        this._init(options);
//      }
hello
//ƒ VueComponent (options) {
//        this._init(options);
//      }

• 从上面看，可以看出每个组件都是一个构造函数

hello === shool
//false

• 他们不是同一个构造函数，都是新的构造函数，每次都返回一个新的VueComponent

  
  vuecomponent.PNG

• 这是新的VueComponent由Vue.extend产生的

• 只要写 <shool></shool>这样的组件标签，vue会自动帮new VueComponent 成一个实例对象

• new Vue的this指向的是Vue实例对象

  <div class="root">
    <shool></shool>
    <hello></hello>
  </div>
  <script>
    const student = Vue.extend({
      template:`<h1>高高</h1>`,
    })
    const shool = Vue.extend({
      template:`<div>
        <h1>理工</h1>
        <student></student>
        <button @click="shoolName">看(shoolName)VueComponent</button>
      </div>`,
      components:{
        student
      },
      methods:{
        shoolName(){
          console.log("------shool-------",this)
        }   
      }
    })
    const hello = Vue.extend({
      template:`<div><h1>good</h1><button @click="shoolName">看(hello)VueComponent</button></div>` ,
      methods:{
        shoolName(){
          console.log("-------hello------",this)
        }   
      }
    })
    const vm = new Vue({
      el:'.root',
      components:{
        shool,
        hello
      }
    })
    // console.log("===>>>>",shool)
    // console.log(shool == hello)
  </script>

看(shoolName)VueComponent.PNG

• 看shool组件的this，点击shool按钮
• 组件的this指向VueComponent实现对象
• 可以看到属性$children: Array(1)，里面有个数组，数组就是那shool嵌套的student属性

6.内置关系
　 1.一个重要的内置关系：VueComponent.prototype.proto === Vue.prototype
2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。