<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??碼云GVP開源項目 12k star Uniapp+ElementUI 功能強大 支持多語言、二開方便! 廣告
                >[success] # 組件開發 1. 從`v1.6.3`開始, 小程序開始支持自定義組件開發, 也讓我們更加方便的在程序中使用組件化 >[info] ## 創建組件 1. 自定義組件由 **json wxml wxss js** 4個文件組成。 2. 先需要在 `json `文件中進行自定義組件聲明(將`component` 字段設為 `true `可這一組文件設為自定義組件) 3. 在`wxml`中編寫屬于我們組件自己的模板 4. 在`wxss`中編寫屬于我們組件自己的相關樣式 5. 在`js`文件中, 可以定義數據或組件內部的相關邏輯 6. 頁面引用自定義組件需要在`對應頁面.json` 文件的`usingComponents` 字段配置,`key `為組件名,`value`為地址 ~~~ { "usingComponents": { "section-info": "/components/section-info/section-info", "test-style": "/components/test-style/test-style", "tab-control": "/components/tab-control/tab-control" } } ~~~ 7. 全局在`app.json`的`usingComponents`聲明某個組件,那么**所有頁面和組件可以直接使用該組** 8. **自定義組件也是可以引用自定義組件的**,引用方法類似于頁面引用自定義組件的方式(使用`usingComponents `字段) 9. 自定義組件和頁面所在項目根目錄名 不能以 **wx-** 為前綴,否則會報錯 >[danger] ##### 組件案例 * 在組件的json文件聲明`component `字段 為true ![](https://img.kancloud.cn/d8/c0/d8c0db3a5b414d3c3d643a37a4f93a1c_682x250.png) * 像編寫頁面一樣編寫組件 ![](https://img.kancloud.cn/d3/a7/d3a7fa076a690295994c0817d6969b4f_603x246.png) * 如果只是指定頁面用在指定頁面的`index.json` `usingComponents` 編寫組件導入 ![](https://img.kancloud.cn/e8/da/e8da039e7d21693f599330857cb9cc7d_794x368.png) * 導入后就可以直接在對應頁面使用 ![](https://img.kancloud.cn/35/bd/35bd074b4fc344ca79ac98a5ca28899e_613x313.png) >[info] ## 組件的樣式 1. 組件內的class樣式,只對組件wxml內的節點生效, 對于引用組件的Page頁面不生效 2. 組件內不能使用**id選擇器、屬性選擇器、標簽選擇器**,就正常使用class 選擇器就好 >[danger] ##### 組件和頁面樣式影響 1. 外部使用`class`的樣式,只對外部`wxml`的`class`生效,對組件內是不生效的 2. 外部使用了`id`選擇器、**··** 3. 外部使用了**標簽選擇器,會對組件內產生影響** 4. 通過設置`Component`對象中,可以傳入一個`options`屬性個`styleIsolation`(隔離)屬性 * `isolated `表示啟用樣式隔離,在自定義組件內外,使用 class 指定的樣式將不會相互影響(默認取值) * `apply-shared` 表示頁面 wxss 樣式將影響到自定義組件,但自定義組件 wxss 中指定的樣式不會影響頁面; * `shared `表示頁面 wxss 樣式將影響到自定義組件,自定義組件 wxss 中指定的樣式也會影響頁面和其他設置 了 ![](https://img.kancloud.cn/29/aa/29aa997540d0b5bed776ca47777131bb_711x512.png) >[info] ## 組件的通信 1. 很多情況下,組件內展示的內容(數據、樣式、標簽),并不是在組件內寫死的,而且可以由使用者來決定 ![](https://img.kancloud.cn/1d/5e/1d5eae4b40cb8b06e9561dc4bd47a1de_954x336.png) ~~~js Component({ options: { styleIsolation: "shared" }, /** * 組件的屬性列表 */ properties: { }, /** * 組件的初始數據 */ data: { }, /** * 組件的方法列表 */ methods: { } }) ~~~ >[danger] ##### 向組件傳遞數據 - properties 1. 通過**從外部傳遞數據給我們的組件**,使用`properties`屬性 2. 通過type 設置類型支持類型,String、Number、Boolean、Object、Array、null(不限制類型) 3. 可以通過`value`設置默認值 ![](https://img.kancloud.cn/73/5b/735bb45a680523c8700509083cacadb0_634x474.png) ![](https://img.kancloud.cn/07/3e/073e7655d2ba2163148d288d629383ab_644x396.png) * 頁面展示 ![](https://img.kancloud.cn/38/72/38722226705b6b1a0d56cc43974ef463_417x94.png) >[danger] ##### 向組件傳遞樣式 - externalClasses 1. 有時候,我們不希望將樣式在組件內固定不變,而是外部可以決定樣式 2. 在`Component`對象中,定義`externalClasses`屬性 ![](https://img.kancloud.cn/84/33/84333d9774229545703fd9437e6f5799_358x150.png) 3. 在組件內的`wxml`中使用`externalClasses`屬性中的class ![](https://img.kancloud.cn/b3/48/b3488112c7bb31b96704a0cf9fb5f5cc_737x125.png) 4. 在頁面中傳入對應的`class`,并且給這個`class`設置樣式 ![](https://img.kancloud.cn/47/06/47060073a9a4ca1ef2dae349406b247d_282x56.png) >[danger] ##### 組件向外傳遞事件 – 自定義事件 1. 在組件的 js 文件的method 屬性中定義方法 2. 將方法傳遞觸發父組件 和 vue 類似但不同是從 `emit `變成`triggerEvent` 3. 父組件綁定暴露出的方法 和 vue 類似但不同從 `on` 變成了`bind:` 4. 接受傳參過來值使用`event.detail` ![](https://img.kancloud.cn/e1/97/e197db511becb60c7decd8c8d3258174_863x310.png) ![](https://img.kancloud.cn/16/8d/168d7c43e7adacbf1a10728ff5e98204_962x325.png) ![](https://img.kancloud.cn/e8/53/e853d46fac68a0791dc9ec2089a1d494_1092x498.png) ![](https://img.kancloud.cn/b0/61/b0615bbc548fa0b42b6c234a297a5bb2_922x331.png) >[info] ## 綜合案例 >[danger] ##### 組件 部分 * 定義組件 ~~~ { "component": true, "usingComponents": {} } ~~~ ~~~ // componets/tab/tab.js Component({ /** * 組件的屬性列表 */ properties: { titles:{ type:Array, value:[] } }, /** * 組件的初始數據 */ data: { currentIndex:0 }, /** * 組件的方法列表 */ methods: { onItemTap(event){ const {index} = event.currentTarget.dataset this.setData({currentIndex:index}) // 將值暴露出去 this.triggerEvent('changeIndex',index) } } }) ~~~ ~~~html <!--componets/tab/tab.wxml--> <view class="tab"> <block wx:for="{{titles}}" wx:key="item"> <view class="tab-item" bindtap="onItemTap" data-index="{{index}}"> <text class="tab-item-text {{ index==currentIndex? 'active':''}}">{{item}}</text> </view> </block> </view> ~~~ ~~~ .tab{ display: flex; line-height: 32px; height: 32px; } .tab-item{ flex: 1; text-align: center; } .tab-item-text{ padding: 5px; } .tab-item-text.active{ border-bottom: 2px solid yellowgreen; } ~~~ >[danger] ###### 使用 ~~~ Page({ /** * 頁面的初始數據 */ data: { titles:["數學","語文","英語","物理"], }, changeIndex(event){ console.log("區域title發生了點擊", event.detail); } }) ~~~ ~~~html <tabs titles="{{titles}}" bind:changeIndex="changeIndex"></tabs> ~~~ * 注冊 ~~~ { "usingComponents": { "tabs":"/componets/tab/tab" } } ~~~
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看