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原型上的属性、方法。
