小程序自定义组件以及使用组件方法

 1.新建一个文件夹,鼠标右击选择新建Component,输入组件名,就会生成组件对应js,json,wxml,wxss等文件.如下图所示:

2.在json文件中,设置字段"component": true,就表示该组件是自定义组件,以后就可以在其它页面中进行使用.

    {
      "component": true,
      "usingComponents": {}
    }

 3.在 wxml 文件中编写组件模板，在 wxss 文件中书写组件样式，它们的写法与页面的写法类似。

 4.在js文件中格式如下:

// components/zujian.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
       shuju: { 
            type: Boolean,    //类型
            value: ''        //值
          //组件数据字段监听器，用于监听 properties 和 data 的变化
            observers:function (newVal) { 
              console.log(newVal)
            }
        },
  },
 
  /**
   * 组件的初始数据
   */
  data: {
 
  },
 
  /**
   * 组件的方法列表
   */
  methods: {
 
  }
})

5.组件的生命周期如下:

6.调用自定义组件

   在需要使用这个组件的页面所对应的 json 文件中引入自定义组件

     "usingComponents": {
        "component": "/components/zujian"    //这是绝对路径
      }

 在wxml中使用组件,shopinfo是父组件往子组件中传的数据,在子组件的properties中进行接收.然后可以在子组件中使用.

<component shopinfo="{{shopinfo}}"></component>