VueComponent.prototype.__proto__===Vue.prototype
让组件原型对象 VueComponent可以访问到vue原型上的属性,方法
首先先看一下Vue与VueComponent的关系图
学过js高级的朋友都应该知道,原型链的关系,一个构造函数的原型对象的__proto__指向的是Object的原型对象,从上图可以看出Vue组件的原型对象的__proto__指向的是Vue的原型对象而不是Object的原型对象;下面来看看代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"> <test></test> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const test = Vue.extend({ name: 'test', template: `<div><h3>我是一个组件</h3></div>`, data() { return{} }, }) const vm = new Vue({ el: '#app', data: {}, components: { test, }, }) console.log(test.prototype.__proto__); console.log(Vue.prototype); </script> </html>
可以自行打印去看看,那VueComponent的原型对象指向的是vue原型对象,是不是也能使用vue原型对象的对象呢,那肯定是必须的啊
那在想想,他们啥都一样,那Vue.prototype的实例对象等不等于Vue的实例化对象呢-----结果肯定相等啊
那组件与Vue实例之间有什么关系呢,看看下面代码结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"> <div> <test></test> <name></name> </div> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> Vue.config.productionTip = false const school = Vue.extend({ name: 'school', template: `<div><h3>我是一个school组件</h3></div>`, data() { return {} }, }) const test = Vue.extend({ name: 'test', template: `<div><h3>我是一个test组件</h3><school></school></div>`, components: { school }, data() { return {} }, }) const name = Vue.extend({ name: 'name', template: `<div><h3>我是一个name组件</h3></div>`, data() { return {} }, }) const vm = new Vue({ el: '#app', data: {}, components: { test, name }, }) // console.log(test.prototype.__proto__); console.log(vm); // console.log(test.prototype.__proto__===Vue.prototype); </script> </html>
上图可以看出Vue实例对象的$children有两个组件实例对象,即它的子组件test和name(当组件成功注册挂载后就自动实例化了)
扩展:
组件就是可复用的Vue实例,他与new Vue接收相同的选项,data、computed、methods及生命周期钩子函数等。但他们还是有不同的地方如el和data
如图,Vue实例上有el组件上确没有;组件上的data是个函数而Vue实例上的data是个对象。
组件中的data函数并且都会有一个return,目的是为了防止数据多次使用的过程中存在引用关系(官方是这么说的:每个实例可以维护一份被返回对象的独立的拷贝)