小程序自定義組件

一、自定義組件

1、什么是自定義組件?

? ?? ?小程序中常常會有一些通用的交互模塊,比如“下拉選擇列表”、“搜索框”、“日期選擇器”等。這些界面交互模塊可能會在多個頁面中用到,邏輯也相對獨立。然而,用傳統(tǒng)的小程序開發(fā)方法來實現這樣的模塊是非常繁瑣的。面對這個情況,小程序基礎庫提供了讓開發(fā)者自己創(chuàng)建界面組件的特性,稱之為“自定義組件”。通過這個特性,開發(fā)者就能夠將這樣的交互模塊抽象成界面組件,使界面代碼組織變得非常靈活。

2、使用場景

  • (1) 多個頁面用到同樣的東西
  • (2) 頁面功能很多,很復雜,使用組件來拆分邏輯

3、自定義組件組成

  • (1)json文件 用于于放置一些最基本的組件配置

  • (2)wxml 文件 組件模版

  • (3)wxss 文件 組件的樣式(無法直接使用全局樣式,需要通過@import導入)

  • (4)js 文件 組件的 JS 代碼,承載組件的主要邏輯

(這四個文件與編寫一個頁面時用到的四個文件非常類似,但也有區(qū)別。下面將介紹如何利用這四個文件編寫一個簡單的自定義組件。)

4、使用組件

  • (1)新建自定義組件文件
    • 在根目錄新建components文件夾,然后右鍵新建自定義組件目錄,最后右鍵新建Component


      新建自定義組件
  • (2)組件json文件配置
      {
        "component": true  這一組文件設為自定義組件
      }
  • (3)組件wxml編寫
        <!-- 子組件 -->
        <view>我是子組件</view>
  • (4)組件wxss文件,因為無法直接使用全局樣式,需要導入
      /* 自定義組件 */
      @import "../../app.wxss";
  • (5)導入自定義組件
    • (5.1)在父組件json文件的usingComponents中導入組件
        {
        "usingComponents": {
          "submit-bar":"../../components/submit-bar/index"
          類似Vue中的導入組件:import xxx from '組件路徑'
        }
      }
    
    • (5.2)在父組件wxml文件中以組件名作為標簽使用組件
        <submit-bar></submit-bar>
    
效果圖

二、父子組件通信

(與Vue父子組件傳參原理一樣,學過Vue的盆友更容易上手哦)

1、父傳子

  • (1)在父組件中的子組件標簽添加屬性,給子組件傳遞數據
        <submit-bar totalMoney="{{totalMoney}}" ></submit-bar>
  • (2)子組件在js中通過properties接收,可以指定接收數據類型
      properties: {
        totalMoney: Number
      }

2、子傳父

  • (1)在父組件的子組件標簽自定義事件,傳給子組件
        <submit-bar  bind:submit="submit" ></submit-bar>
  • (2)子組件用this.triggerEvent('父組件自定義事件', '要傳遞的參數'),觸發(fā)父組件傳過來的自定義事件
      this.triggerEvent("submit", 'Hello Grayly')
  • (3)第二步執(zhí)行后,父組件自定義事件綁定的函數就會執(zhí)行,同時接受子組件傳過來的數據
    (在event.detail中可得到子組件傳過來的參數)
      submit(event) {
          console.log(event);
      },
父組件接收到子組件傳過來的參數
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容