微信小程序中的自定義組件 以及 相關的坑

Step1

我們初始化一個小程序（本示例基礎版本庫為 1.7 ），刪掉里面的示例代碼，並新建一個 components 文件夾，用於存放我們以后開發中的所用組件，今天我們的目的是實現一個 首頁 組件，因此，我們在 components 組件中新建一個 home 文件夾來存放我們的彈窗組件，在 home 下右擊新建 Component 並命名為 home 后，會生成對應的 json wxml wxss js 4個文件，也就是一個自定義組件的組成部分，此時你的項目結構應該如下圖所示：

 

 

Step2

組件初始化工作准備完成，接下來就是組件的相關配置，首先我們需要聲明自定義組件，也就是將 dialog.json 中 component 字段設為 true ：

{
  "component": true,        // 自定義組件聲明
  "usingComponents": {}     // 可選項，用於引用別的組件
}

 

Step3

編寫組件這里就不在演示了

 

step4

截至目前為止，你應該完成了一個自定義彈窗組件的大部分，可是你保存后並沒有發現任何變化，因為我們還需要在 index.wxml 文件中引入它！

首先需要在 index.json 中引入組件：

{
    "usingComponents": {
        "home": "/components/home/index"
    },
    "navigationBarTitleText": "首頁"
}

這里切記引入組件一定要加  /  要不然會報各種奇怪的錯誤

然后我們在 index.wxml 中引入它

<home></home>

 

二、 父組件向子組件傳遞數據

父組件

<annicate bindtap='detailFun' wx:for="{{notice_list}}" wx:key="index" jsonDate="{{item}}"></annicate>

子組件

Component({
    properties: {
        status: {
            type: String,
            value: 0,
        },
        bastList: {
            type: Object,
            value: [],
        }
    },
    data: {

    }
})