赞
踩
这篇文章主要介绍的是VueComponent函数。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>VueComponent</title> </head> <body> <div id="root"> <school></school> </div> <script src="./js/vue.js"></script> <script> Vue.config.productionTip = false; const school = Vue.extend({ template:` <div> <div>学校:{{schoolName}}</div> <div>地址:{{schoolAddress}}</div> </div> `, data() { return { schoolName:"尚硅谷", schoolAddress:"北京" } }, }) const school1 = Vue.extend({ template:` <div> <div>学校:{{schoolName}}</div> <div>地址:{{schoolAddress}}</div> </div> `, data() { return { schoolName:"尚硅谷", schoolAddress:"北京" } }, }) //输出school组件 console.log(school); console.log(school === school1); new Vue({ el:"#root", components:{ school } }) </script> </body> </html>
效果:
第一个结论:
组件的本质是一个名为VueComponent的构造函数,并且不是程序员定义的,而是Vue.extend函数生成的。
并且每次生成的都是不一样的VueComponent的构造函数。
第二个结论:
每当我们使用主键(写组件标签时,<school></school>),vue解析到组件标签时,会帮我们使用VueComponent构造函数创建一个VueComponent对象,帮我们执行 new VueComponent(options)
验证:
修改vue.js文件的源码,找到这一段,加上一段代码:
效果:
第三个结论:this的指向:
在组件配置中:
data函数,methods中配置的函数,watch中配置的函数,computed中配置的函数的this指向的都是VueComponent组件对象。
在vue实例配置中:
data函数,methods中配置的函数,watch中配置的函数,computed中配置的函数的this指向的都是vue对象。
效果:
Vue实例对象简称vm,VueComponent实例对象简称vc。
一个重要的内置关系:
VueComponent.prototype.__proto__===Vue.prototype ,这么做是为了让组件实例对象vc可以访问到Vue原型上的属性方法,已达到复用,因为Vue和VueComponent在很大程度上都是相同的(95%),所以像$mount和$watch方法,定义在Vue的原型对象上,然后VueComponent的原型对象的原型对象指向Vue的原型对象,VueComponent和Vue的实例就可以使用同一份方法和属性,而不用写两份一样的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>一个重要的内置对象</title> </head> <body> <script src="./js/vue.js"></script> <script> Vue.config.productionTip = false; const school = Vue.extend({ template:` <div> <div>学校:{{schoolName}}</div> <div>地址:{{schoolAddress}}</div> </div> `, data() { return { schoolName:"尚硅谷", schoolAddress:"北京" } }, }) console.log(school.prototype.__proto__ === Vue.prototype); </script> </body> </html>
效果:
文字解说就是VueComponent的原型对象的原型对象 === Vue的原型对象。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。