小程序 自定义组件使用总结

根目录

新建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){
    
}