1.在程序中新建文件夹 component，然后 选中文件夹-右键-新建-Conponent

image.png

2.然后就可以在wxml里面进行组件的布局啦

<!--component/nameItem.wxml-->
<view class='mainView'>
  <image class='image'></image>
  <view class='rightView'>
    <text>标题</text>
    <text>描述</text>
  </view>
</view>

3.引用：在需要用到组件的地方进行引用

❗️在引用的 文件的json里面添加

 "usingComponents": {
      组件的名字    组件的路径
      "nameItem": "../../component/nameItem" 
    }

❗️在wxml 里面可以使用组件 nameItem

<nameItem />

4.定义属性列表、组件的初始数据、方法

// component/nameItem.js
Component({
  /**
   * 组件的属性列表，外部可以查看
   */
  properties: {
    defaultTitle: {
      type: String, // String, Number, Boolean, Object, Array, null
      value: '默认标题',
      observer: function (newVal, oldVal) { 
      } // 属性被改变时执行的函数（可选）

    },
    defaultDes: {
      type: String,
      value: '默认描述'
    }
  },

  /**
   * 组件的初始数据，组件内部使用
   */
  data: {
    info:{},
    info1: ''
  },

  /**
   * 组件的方法列表
   */
  methods: {

    imageTap: function (){
      console.log('点击了图片')
    },
    titleTap: function () {
      console.log('点击了标题')
    },
    desTap: function () {
      console.log('点击了描述')
    },
  }
})

使用

<view class='mainView'>
  <image class='image' bindtap='imageTap'></image>
  <view class='rightView'>
    <text bindtap='titleTap'>{{defaultTitle}}</text>
    <text bindtap='desTap'>{{defaultDes}}</text>
  </view>
</view>

<nameItem defaultTitle='这就是我的标题' defaultDes='这就是我的描述'/>
<nameItem defaultTitle='这就是我的标题' />
<nameItem defaultDes='这就是我的描述' />

5.点击组件的按钮，触发page里面的方法

1. 在组件按钮的点击方法里面使用triggerEvent
   自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项

 /**
   * 组件的方法列表
   */
  methods: {

    imageTap: function (){
      console.log('点击了图片')

      // 参数
      var myEventDetail = {imageURL: 'imageURL', title: 'title', des: 'des'} // detail对象，提供给事件监听函数

      var myEventOption = {} // 触发事件的选项，选项，具体参数可看小程序API
      
      this.triggerEvent('customComponentImageEvent', myEventDetail, myEventOption)
    },
    titleTap: function () {
      console.log('点击了标题')
    },
    desTap: function () {
      console.log('点击了描述')
    },
  }

2.在page的wxml里面需要绑定需要调用的方法

<nameItem default-Title='这就是我的标题' default-Des='这就是我的描述' 
bindcustomComponentImageEvent="customComponentImageEvent"/>

3.在page里面声明方法,传递的参数可在e里面获取

 customComponentImageEvent:function(e){
    console.log('自定义组件的图片事件:',e)
  }

注：使用 this.data 可以获取内部数据和属性值，但不要直接修改它们，应使用 setData 修改。