上課9月與沉淀0929vue路由的組件

天眼前端培訓(xùn)Vue的組件前端講師：張焱CONTENT01組件是什么，它有何作用組件的定義及使用子組件和父組件、Vue實例020304插槽、分發(fā)內(nèi)容05動態(tài)組件05單文件組件組件是什么，有何作用01Vue組件01組件

一大堆零件組合成的一個成品，它在需要時可組裝到Vue實例中使用；它也是一個實例對象，具有和newVue實例一樣的屬性：data、watch、computed…;

它是可以重復(fù)使用的，并且一個實例中可以有多個相同的組件，每個組件間不會互相影響因為每個組件調(diào)用時都會創(chuàng)建一個新實例對象;

綜上所訴：我們可以把共有的公共的內(nèi)容放到組件里組件定義和使用02Vue組件01組件定義

全局組件Vponent(‘組件名稱',組件屬性json對象|組件屬性構(gòu)造器對象);查看案例：destination-demo.html實例組件Vue實例的參數(shù)配置項：components:{'組件名稱',組件屬性json對象|組件屬性構(gòu)造器對象};查看案例：destination-demo.htmlVue組件01組件定義時需要注意

組件名稱符合字母全小寫且必須包含一個連字符定義規(guī)則，不能使用html中標簽名稱進行定義，如：diy-footer。

更多的規(guī)則查看官方文檔的風(fēng)格指南/v2/style-guide/組件屬性中的data屬性和Vue實例的data屬性不同，組件屬性的data屬性必須是一個函數(shù)并且需要通過return關(guān)鍵字返回對應(yīng)的數(shù)據(jù)對象；Vue組件01組件使用

在對應(yīng)的vue實例容器中，像使用html標簽一樣，使用組件：<組件名稱></組件名稱>,如:<diy-footer></diy-footer>Vue組件01Vue實例的template模版屬性使用

直接在template屬性中定義一個模版內(nèi)容給template屬性指定一個template標簽內(nèi)容塊的id屬性

給template屬性指定一個<scripttype="x-template|…">標簽內(nèi)容塊的id屬性/cc11001100/p/7189410.html/zh-CN/docs/Web/HTML/Element/template子組件、父組件、Vue實例03Vue組件01組件間嵌套

組件之間可以嵌套，但只能一級一級向下嵌套，即第一層組件嵌套第二層組件，第二層組件嵌套第三層組件…..Vue實例A的組件B相對于Vue實例A是子組件，Vue實例A的組件B嵌套的組件C相對于組件B是子組件；對應(yīng)的可以通過實例對象的$children屬性獲取對應(yīng)的子組件Vue組件01組件、實例的通信（一）

組件的props屬性：props:[‘a(chǎn)bc’]，props:{‘content’:String,‘count’:{type:Number,default:’屬性默認值’,}}Vue組件01組件、實例的通信（一）

props屬性的數(shù)據(jù)類型：String

=>字符串類型Number

=>數(shù)值類型Boolean=>boolean類型Function=>函數(shù)類型Object

=>對象類型Array

=>數(shù)組類型Vue組件01組件、實例的通信（一）

props屬性定義需要注意：1.駝峰命名2.全小寫組件綁定使用：駝峰命名在使用時使用連接符橫杠連接單詞；比如：定義的是searchView=>組件綁定時使用search-view,組件內(nèi)使用時使用searchViewVue組件01組件、實例的通信（二）

$emit(事件名稱[,事件需要的參數(shù),事件需要的參數(shù)…])

=>調(diào)用vue實例對象的方法

例如：this.$emit('show-count',’這是參數(shù)字符串’);插槽、分發(fā)內(nèi)容04Vue組件01插槽

內(nèi)存插槽CPU插槽顯卡插槽……Vue組件01Vue的插槽

簡單插槽簡單說就是內(nèi)容插槽，組件中某些固定內(nèi)容在不同頁面會有變化這時就需要用到它了；寫法：<組件名稱>插槽內(nèi)容</組件名稱>,組件模版里定義一個:<slot></slot>具名插槽在簡單插槽基礎(chǔ)上，需求變化為組件中固定內(nèi)容在不同頁面有多個并且在頁面多個不相同時就需要用到具名插槽；寫法：<組件名稱><[標簽|組件]名稱

slot=“對應(yīng)插槽名稱”>插槽內(nèi)容</[標簽|組件]名稱></組件名稱>,組件模版里定義一個:<slotname=“插槽名稱”></slot>Vue組件01Vue的插槽加深理解

/chinabin1993/p/9115396.html/a419419/article/details/80847553動態(tài)組件05Vue組件01動態(tài)組件is屬性

1.標簽節(jié)點使用is屬性，例如：<divis=“組件名稱”></div>2.組件標簽使用is屬性,例如：<component:is=“組件名稱”></component>或者<component:is=“data數(shù)據(jù)值”></component>其中紅