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

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

父組件向子組件傳參第二節(jié)子組件向父組件傳參第三節(jié)組件之間傳參第四節(jié)slot傳參知識目標教學目標理解和掌握父與子組件之間相互傳參的方法掌握兩個獨立組件之間相互傳參的流程和方法理解父子間組件slot方式傳參的過程和原理知識點預覽#節(jié)知識點難點重點應用7C07-01父組件向子組件傳參1、父向子組件傳參說明

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

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

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

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

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

全局事件總線

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

組件之間傳參

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

作用域插槽

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