小程序 自定義組件使用總結

根目錄

新建component 文件夾

新建文件夾 名字爲自己要寫的組件

右鍵文件夾 新建 Component
 

.wxss與.wxml 與 頁面相同

.json

{
    "component": true,  //聲明爲組件
    "usingComponents": {}
}

//自動生成的

.js

Component({
    /**
     * 組件的屬性列表
     */
    properties: {
        title: { // 接收父級的值
            type: String,
            value: '',
        },
    },

    /**
     * 組件的初始數據
     */
    data: {

    },

    ready: function () { 
        this.triggerEvent("listenersMove", 1); // 調用父級綁定的方法
     },

    /**
     * 組件的方法列表
     */
    methods: {  // 方法需要寫在 methods 中
        back: function () {
            wx.navigateBack()
        },
    },

})

父級頁面

.json

{
  "usingComponents": {
      "myheader": "/component/Header/Header",
  }
}

.html

<myheader title="{{title}}" bind:listenersMove="listenersMove"></myheader>

.js

data:{
    title: "",
},

listenersMove(e){
    
}