<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>一个重要的内置关系</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
1. 一个重要的内置关系 VueComponet.prototype.__proto__==Vue.prototype
2. 为什么要有这个关系，让组件实例对象vc 可以访问Vue原型上的属性和方法
-->
<div id="root">
<school></school>
</div>
<script type="text/javascript">
Vue.prototype.x = 99;
//创建组件
const school = Vue.extend({
template: `
<div>
<h2>学校名称{{schoolName}}</h2>
<h2>学校地址{{address}}</h2>
<button @click="showx">点我输出x</button>
</div>
`,
data() {
return {
schoolName: "洛阳理工",
address: "洛阳",
};
},
methods: {
showx() {
console.log(this.x);
},
},
});
//console.log(school);
//console.log(hello);
//console.log(school === hello); //false
// school.a = 99;
// console.log(school.a);
// console.log(hello.a);
new Vue({
el: "#root",
data: {
name: "smy",
},
//注册组件
components: {
school,
},
});
//定义一个构造函数
function Demo() {
this.a = 1;
this.b = 2;
}
//创建一个demo 的实例对象
const d = new Demo();
console.log(Demo.prototype); //显示原形属性
console.log(d.__prototype__); // 隐式原形属性
console.log(Demo.prototype == d.__prototype__);
//程序员通过显示原型属性操作原型对象，追加一个x 属性 值为99
Demo.prototype.x = 99;
console.log("@", d);
console.log(d.x);
console.log(d.__proto__.x);
</script>
</body>
</html>
如下图所示
