day3
Vue 組件
定義Vue組件
什么是組件:
組件的出現(xiàn), 就是為了拆分Vue實(shí)例的代碼量的,能夠讓我們以不同的組件,來(lái)劃分不同的功能, 將來(lái)需要什么功能, 直接調(diào)用對(duì)應(yīng)的組件即可.
模塊化和組件化概念的解讀
- 什么是模塊化：
是從代碼的角度分析問(wèn)題；把可復(fù)用的代碼，抽離為單獨(dú)的模塊请垛；- CommonJS 模塊化規(guī)范；
- 模塊化的好處：提高了代碼的復(fù)用率恰梢，提供模塊作用域的概念，防止全局變量污染；方便了程序員之間 代碼互相調(diào)用臀晃；
- 什么是組件化：組件化是從
頁(yè)面UI的角度進(jìn)行分析問(wèn)題的窗轩；把頁(yè)面中可復(fù)用的UI結(jié)構(gòu)夯秃，抽離為單獨(dú)的組件；- 組件化的好處：方便了 UI 結(jié)構(gòu)的重用痢艺；隨著項(xiàng)目開(kāi)發(fā)的深入仓洼，手中可用的組件會(huì)越來(lái)越多；
elementUI
- 組件化的好處：方便了 UI 結(jié)構(gòu)的重用痢艺；隨著項(xiàng)目開(kāi)發(fā)的深入仓洼，手中可用的組件會(huì)越來(lái)越多；
定義全局組件
- 定義組件的語(yǔ)法
Vue.component('組件的名稱(chēng)', { 組件的配置對(duì)象 })
- 使用組件的語(yǔ)法
- 把
組件的名稱(chēng), 以標(biāo)簽的形式腹备，引入到頁(yè)面上就行衬潦；
- 把
注意： 從更抽象的角度來(lái)說(shuō)，每個(gè)組件植酥，就相當(dāng)于是一個(gè)自定義的元素镀岛；
注意： 組件中的DOM結(jié)構(gòu)，有且只能有唯一的根元素（Root Element）來(lái)進(jìn)行包裹友驮！
定義私有組件(父子組件)
components
組件中定義data數(shù)據(jù)漂羊、methods方法以及生命周期函數(shù)
組件和實(shí)例的相同和區(qū)別：
- 組件中的 data 必須是一個(gè) function 并 return 一個(gè) 對(duì)象；在 Vue 實(shí)例中卸留，實(shí)例的 data 既可以是 對(duì)象走越，也可以是 方法；
- 組件中耻瑟，通過(guò) template 屬性來(lái)指定組件的UI結(jié)構(gòu)旨指；在 Vue 實(shí)例中，通過(guò) el 屬性來(lái)指定實(shí)例控制的區(qū)域喳整；但是實(shí)例也可以使用
template; - 組件和實(shí)例谆构，都有自己的
生命周期函數(shù)，私有的過(guò)濾器框都，methods處理函數(shù)搬素；
為什么組件中的data屬性必須定義為一個(gè)方法并返回一個(gè)對(duì)象
- 通過(guò)計(jì)數(shù)器案例演示
總結(jié)： 因?yàn)檫@樣，能夠保證每次創(chuàng)建的組件實(shí)例魏保，都有自己的一塊唯一的數(shù)據(jù)內(nèi)存(對(duì)象)熬尺，防止組件之間數(shù)據(jù)的干擾；
使用 <component>標(biāo)簽實(shí)現(xiàn)組件切換
-
<component>是Vue提供的谓罗；作用是 把 is 指定的 組件名稱(chēng)粱哼，渲染到<component>內(nèi)部 - 身上有一個(gè) :is屬性
多個(gè)組件切換 -- 應(yīng)用動(dòng)畫(huà) 和 mode 方式
<transition mode= 'out-in'>
<component :is='conName'></component>
</transition>
組件傳值
父?jìng)髯? props-down
組件中的props 中的數(shù)據(jù), 都是通過(guò)父組件傳遞給子組件中的
props 中的數(shù)據(jù), 都是只讀的 data 是可讀可寫(xiě)的
傳遞方法: 使用的是 事件綁定機(jī)制 v-on 通過(guò) this.$emit('fun',參數(shù),...) 這個(gè)參數(shù)可以傳遞給父組件 相當(dāng)于傳值給父組件
子傳父
- 通過(guò) this.$emit()
