微信小程序自定义组件的使用

创建文件夹 新建组件

image.png

子组件的结构

Component({
  /**
   * 组件的属性列表(获取父组件传递的属性)
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

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

  }
})

wxml的slot(控制父组件在子组件显示不同的内容)

子组件定义
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})



  
  这里是组件的内部细节
  




  
    
    这里是插入到组件slot name="before"中的内容
    
    这里是插入到组件slot name="after"中的内容
  

数据绑定

prop-a属性命名用 ''-'' 连接 properties中用驼峰命名获取

  
    
    这里是插入到组件slot中的内容
  

组件间通信与事件

1.父->子传递数据:通过属性绑定,子组件在 properties中获取到父组件传递过来的属性

使用方法

子组件定义父组件的属性
properties: {
    bgColor: {
      type: String,
      default: ''
    }, 
    isCustom: {
      type: [Boolean, String],
      default: false
    },
    isBack: {
      type: [Boolean, String],
      default: false
    },
    bgImage: {
      type: String,
      default: ''
    },
  },

子组件wxml中
{{bgColor}} 即可获取

2.子组件->父组件传递数据 事件的方式传递

子组件中通过 this.triggerEvent触发 父组件定义的 'myevent'方法 同时传递参数

子组件wxml  通过button触发onTap方法,方法内部 手动触发父组件的方法myevent
点击这个按钮将触发“myevent”事件

Component({
  properties: {},
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

父组件引用子组件 在内部通过 bindmyevent(也可以写成bind:myevent) 绑定了自定义方法 "myevent"

    
     这里是插入到组件slot中的内容 
  

3.父组件获取子组件属性方法终极方法

父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。