一、自定義組件

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);
      },

父組件接收到子組件傳過來的參數