示例一：
<!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>
<div id="root">
</div>
</body>
</html>
<script type="text/javascript">
Vue.config.productionTip = false
// 定义一个构造函数
function Demo () {
this.a = 1
this.b = 1
}
// 创建一个Demo实例对象
const demo = new Demo();
//prototype 显示原型属性
console.log('显示原型属性==>', Demo.prototype)
//__proto__ 隐式原型属性,注：下划线为两个
console.log('隐式原型属性==>', demo.__proto__)
// 程序员通过显示原型属性操作原型对象，追加一个x属性
Demo.prototype.x = 100
console.log('x==>' + demo.__proto__.x) //等价于以下写法
console.log('x==>' + demo.x)
console.log('demo.__proto__==Demo.prototype??', Demo.prototype === demo.__proto__)
const vm = new Vue({
el: '#root',
data: {
isHot: true,
},
methods: {
changeWeather () {
this.isHot = !this.isHot
},
},
})
</script>
总结：
- 一个重要的内置关系：VueComponent.prototype.__proto__===Vue.prototype
- 为什么要有这个关系：让组件实例对象(vc)可以访问到Vue原型上的属性、方法
- 注：组件实例对象vc，和Vue不完全一致，不能有el，data只能写为方法
示例二：
<!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>
<div id="root">
<h3>
1.一个重要的内置关系：VueComponent.prototype.__proto__===Vue.prototype <br><br>
2.为什么要有这个关系：让组件实例对象(vc)可以访问到Vue原型上的属性、方法<br><br>
</h3>
</div>
</body>
</html>
<script type="text/javascript">
Vue.config.productionTip = false
/* // 定义一个构造函数
function Demo () {
this.a = 1
this.b = 1
}
// 创建一个Demo实例对象
const demo = new Demo();
//prototype 显示原型属性
console.log('显示原型属性==>', Demo.prototype)
//__proto__ 隐式原型属性,注：下划线为两个
console.log('隐式原型属性==>', demo.__proto__)
// 程序员通过显示原型属性操作原型对象，追加一个x属性
Demo.prototype.x = 100
console.log('x==>' + demo.__proto__.x) //等价于以下写法
console.log('x==>' + demo.x)
console.log('demo.__proto__==Demo.prototype??', Demo.prototype === demo.__proto__)
*/
const school = Vue.extend({
name: 'school',
template:
'<div>'
+ ' <h3>学校名称：{{schoolName}}</h3>'
+ ' <h3> 学校地址：{{ schoolAddress }}</h3>'
+ '</div>',
data () {
return {
schoolName: '希望小学',
schoolAddress: '西安/110号/希望小学',
}
},
})
const vm = new Vue({
el: '#root',
data: {
msg: '你好vue',
},
})
// 一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
console.log('school.prototype.__proto__===Vue.prototype', school.prototype.__proto__ === Vue.prototype)
</script>
标签：__,Vue,proto,--,Demo,37,.__,prototype From： https://www.cnblogs.com/YYkun/p/18058405