Component 父子組件關系 · web前端

[TOC] # 簡介在實際開發中我們經常會遇到在一個自定義組件中要使用其他自定義組件，這就需要一個父子組件關系。 # 構造器外部寫局部注冊組件上面上課我們都把局部組件的編寫放到了構造器內部，如果組件代碼量很大，會影響構造器的可讀性，造成拖拉和錯誤。我們把組件編寫的代碼放到構造器外部或者說單獨文件。我們需要先聲明一個對象,對象里就是組件的內容 ~~~ <body> <div id="app"> <panda></panda> </div> </body> <script type="text/javascript"> var jdxia = { template: `<div style="color:red;">param from china!</div>`, }; var app = new Vue({ el: '#app', components: { "panda": jdxia } }); </script> ~~~ # 父子組件的嵌套我們先聲明一個父組件，然后里邊我們加入一個組件，我們來看這樣的代碼如何寫 ~~~ <body> <div id="app"> <panda></panda> </div> </body> <script type="text/javascript"> var city = { template: `<div>四川來自china</div>` }; var jdxia = { template: `<div style="color:red;"> param from china! <city></city> </div>`, components: { "city": city } }; var app = new Vue({ el: '#app', components: { "panda": jdxia } }); </script> ~~~