一个重要的内置关系:VueComponent.prototype.__proto__===Vue.prototype
为什么有这种关系:为了让组件实例对象vc可以访问到Vue原型链上的属性、方法
回顾原型链:显示原型和隐式原型
//定义的构造函数
function Demo() {
this.a = 1
this.b = 2
}
//创建Demo的实例对象
const d = new Demo()
console.log(Demo.prototype)//显示原型
console.log(d.__proto__)//和上面的一样
console.log(Demo.prototype===d.__proto__)
//程序原通过显示原型操作原型对象追加属性
Demo.prototype.x=99
console.log('隐式原型可以拿到',d.__proto__.x,'直接写:',d.x)
console.log('d是Demo实例对象',d)
调用Vue.extend返回就是VueComponent实例对象
const school = Vue.extend({
name: 'school',//开发者工具的显示
template: `
<div>
<h2>学校名称:{{schoolName}}</h2>
<h2>学校地址:{{adress}}</h2>
<button @click="showX">点击提示学校名</button >
</div>
`,//结构
data() {
return {//防止相同对象改变
schoolName: 'xxxx学校',
adress: 'xxx街道',
}
},//数据
methods: {
showX(){
console.log('组件实例对象',this)
}
},
})
console.log(school.prototype.__proto__ === Vue.prototype)
console.log(Object.prototype === school.prototype.__proto__)//被改了
console.log(Object.prototype === Vue.prototype.__proto__)
console.log(school.prototype.__proto__.__proto__ === Object.prototype)
console.log(school.prototype.__proto__ === Vue.prototype)
const vm = new Vue({
el: '#root',
components: {
school,
}
});