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

定義全局組件

1. 定義組件的語(yǔ)法
   • Vue.component('組件的名稱(chēng)', { 組件的配置對(duì)象 })
2. 使用組件的語(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ū)別：

1. 組件中的 data 必須是一個(gè) function 并 return 一個(gè) 對(duì)象；在 Vue 實(shí)例中，實(shí)例的 data 既可以是 對(duì)象，也可以是 方法；
2. 組件中，通過(guò) template 屬性來(lái)指定組件的UI結(jié)構(gòu)；在 Vue 實(shí)例中，通過(guò) el 屬性來(lái)指定實(shí)例控制的區(qū)域；但是實(shí)例也可以使用 template;
3. 組件和實(shí)例，都有自己的生命周期函數(shù)，私有的過(guò)濾器，methods 處理函數(shù)；

為什么組件中的data屬性必須定義為一個(gè)方法并返回一個(gè)對(duì)象

1. 通過(guò)計(jì)數(shù)器案例演示

總結(jié)： 因?yàn)檫@樣，能夠保證每次創(chuàng)建的組件實(shí)例，都有自己的一塊唯一的數(shù)據(jù)內(nèi)存(對(duì)象)，防止組件之間數(shù)據(jù)的干擾；

使用 <component>標(biāo)簽實(shí)現(xiàn)組件切換

1. <component> 是Vue提供的；作用是 把 is 指定的 組件名稱(chēng)，渲染到 <component> 內(nèi)部
2. 身上有一個(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()