Vue.js 超詳細(xì)入門與項(xiàng)目實(shí)戰(zhàn)（微課視頻版）課件 第07章 組件傳參

第7章組件傳參課件V1.0

教學(xué)內(nèi)容第一節(jié)

父組件向子組件傳參第二節(jié)子組件向父組件傳參第三節(jié)組件之間傳參第四節(jié)slot傳參知識(shí)目標(biāo)教學(xué)目標(biāo)理解和掌握父與子組件之間相互傳參的方法掌握兩個(gè)獨(dú)立組件之間相互傳參的流程和方法理解父子間組件slot方式傳參的過程和原理知識(shí)點(diǎn)預(yù)覽#節(jié)知識(shí)點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用7C07-01父組件向子組件傳參1、父向子組件傳參說明

2、父向子組件傳參實(shí)例C07-02子組件向父組件傳參1、子組件自定義事件傳參2、訪問子組件對(duì)象中數(shù)據(jù)C07-03組件之間傳參1、全局事件總線2、組件之間傳參C07-04slot傳參1、作用域插槽2、動(dòng)態(tài)插槽

在Vue中，如果父組件向子組件傳遞數(shù)據(jù)，可以借助子組件的屬性（prop），攜帶父組件傳入的數(shù)據(jù)；如果子組件向父組件傳遞數(shù)據(jù)，則可以借助子組件的自定義事件（event）向父組件發(fā)送子組件的數(shù)據(jù)。。父向子組件傳參說明如圖所示事件發(fā)送子組件屬性傳遞父組件

當(dāng)父組件在視圖中添加子組件時(shí)，通過動(dòng)態(tài)綁定的方式向自定義的“inputName”屬性傳入文本框中的動(dòng)態(tài)值，子組件的屬性接收該值后，直接顯示在該組件的視圖元素中，從而最終實(shí)現(xiàn)父組件通過子組件自定義的屬性傳入?yún)?shù)的過程。父向子組件傳參實(shí)例

父組件通過綁定子組件中自定義的事件，在觸發(fā)的事件中，獲取傳入的數(shù)據(jù)，這種方式是子組件向父組件傳參的重要方式。子組件自定義事件傳參

父組件除了綁定子組件的自定義事件獲取傳入的參數(shù)外，還可以直接訪問通過ref屬性命名后的子組件，并獲取到子組件中的數(shù)據(jù)。訪問子組件對(duì)象中數(shù)據(jù)全局事件總線，又簡(jiǎn)稱為“EventBus”，是用于全局范圍內(nèi)通訊的一種常用方案，它的特點(diǎn)是簡(jiǎn)單、靈活和輕量級(jí)，在中小型方案中，優(yōu)先推薦該方案；在Vue2和Vue3中，EventBus的實(shí)現(xiàn)結(jié)構(gòu)不同：1、在Vue2中，通常在項(xiàng)目中添加一個(gè)名稱為Bus.js的文件，在文件中導(dǎo)出一個(gè)新的Vue實(shí)例即可，然后在各個(gè)組件中，引入Bus.js文件，通過$emit定義傳遞的事件和參數(shù)，使用$on傳監(jiān)聽事件，并獲取修傳入的參數(shù)。2、由于在Vue3中移除了$emit、$on這幾個(gè)事件API，因此無法像Vue2一樣導(dǎo)出一個(gè)Vue實(shí)例化對(duì)象，根據(jù)官方推薦，可以借助第三方插件mitt來實(shí)現(xiàn)。

全局事件總線

使用安裝好的第三方插件mitt，結(jié)合一個(gè)完整的實(shí)例，來演示任意組件之間如何實(shí)現(xiàn)參數(shù)傳遞的過程。

組件之間傳參

插槽分為三種，分別為匿名插槽、具名插槽和作用域插槽，與前兩種只能各自訪問自己組件的內(nèi)容不同，作用域插槽可以在父組件中訪問到子組件的內(nèi)容，使用非常靈活。接下來，結(jié)合一個(gè)完整的實(shí)例需求，來演示在作用域插槽中，父組件如何訪問和過濾子組件傳入的參數(shù)。

作用域插槽

不僅父組件可以通過插槽方式訪問并控制子組件傳入的數(shù)據(jù)，而且可以控制傳入父組件時(shí)插槽的名稱，從而使不同的插槽根據(jù)名稱的不同，使用場(chǎng)景也不同，例如在一個(gè)小區(qū)詳細(xì)頁(yè)中，可以根據(jù)小區(qū)類型，