创建文件夹 新建组件

image.png

子组件的结构

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

  },

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

  },

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

  }
})

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

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

<!-- 字组件模板 -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>这里是组件的内部细节</view>
  <slot name="after"></slot>
</view>

<!-- 父组件组件的页面模板 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>
    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </component-tag-name>
</view>

数据绑定

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

<!-- 父组件的页面模板 -->
<view>
  <component-tag-name prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}">
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view>
  </component-tag-name>
</view>

组件间通信与事件

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
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>

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

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

<my-component bindmyevent="myEventListener">
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
     <view>这里是插入到组件slot中的内容</view> 
  </my-component>

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

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