Vue组件内置关系
?VueComponent.prototype.__proto__===Vue.prototype
讓組件原型對象?VueComponent可以訪問到vue原型上的屬性，方法
首先先看一下Vue與VueComponent的關系圖
?學過js高級的朋友都應該知道，原型鏈的關系，一個構造函數(shù)的原型對象的__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 = falseconst 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及生命周期鉤子函數(shù)等。但他們還是有不同的地方如el和data
如圖，Vue實例上有el組件上確沒有；組件上的data是個函數(shù)而Vue實例上的data是個對象。
????????組件中的data函數(shù)并且都會有一個return，目的是為了防止數(shù)據(jù)多次使用的過程中存在引用關系（官方是這么說的：每個實例可以維護一份被返回對象的獨立的拷貝）
總結
- 上一篇： 虚幻引擎3命令行参数
- 下一篇： vue实现点击复制