小程序的自定义组件component

如何获取component

• 使用小程序开发者工具，右击创建component选项的时候，就可以得到component四大件

  • 

component的所有参数

// 和vue 组件不同的地方是，小程序是在json文件引入的
// index.json
{
  "navigationBarTitleText": "引入组件的页面",
  "usingComponents": {
    "componts-tag-name":"../../componets/navbar/navbar"
  }
}
// 使用引入的组件
// index.wxml
<view class="container log-list">
  <componts-tag-name name="{{logsData}}"></componts-tag-name>
</view>

• properties
  • 组件对外的属性
  • 类似于 vue 中的 props

  <!--组件使用properties-->
  Component({
    /**
     * 组件的属性列表
     */
    properties: {
      name:{
        type:'string', // 限制的数据类型
        optionalTypes:[], //多个数据类型
        value:'', // 默认值
        observer:function(){
            // 当前数据改变的时候触发
            // 第一次传入数据也会触发
        }
      }
    }
  })
  
  <!--页面-->
  <view class="container log-list">
    <componts-tag-name name="{{logsData}}"></componts-tag-name>
  </view>
  

• data
  • 组件内部的数据
• observers
  • 监听组件数据字段的变化
  • 第一次传入数据也会触发
  • 监听所有属性的变化

  // 使用通配符的方式来监听所有属性
  observers: { // 监听某个对象下面的所有属性的setData操作
      'some.field.**': function(field) {
        // 使用 setData 设置 this.data.some.field 本身或其下任何子数据字段时触发
        // （除此以外，使用 setData 设置 this.data.some 也会触发）
        field === this.data.some.field
      },
    },
    observers: { //监听所有的setData操作
      '**': function() {
        // 每次 setData 都触发
      },
    },
    observers: {//也可以使用数组的方式
      'arr[12]': function(arr12) {
        // 使用 setData 设置 this.data.arr[12] 时触发
        // （除此以外，使用 setData 设置 this.data.arr 也会触发）
        arr12 === this.data.arr[12]
      },
  }
      ~~~
  

• methods
  • 组件的方法
• behaviors
  • 类似mixins和traits，组件间的复用
• created ( 生命周期函数 )
  • 组件实例刚创建，此时不用调用setData
• attached ( 生命周期函数 )
  • 组件实例进入页面节点树时执行，此时可以使用setData
• ready ( 生命周期函数 )
  • 组件布局完成后执行
• moved ( 生命周期函数 )
  • 组件实例被移动到节点树的另一个位置时执行
• detached ( 生命周期函数 )
  • 组件实例从页面节点树移除时候执行，w'x
• relations
  • 定义组件关系
• externalCLasses
  • 接受组件外部样式类
• options
  • 一些选项
• lefetimes
  • 组件生命周期声明对象
• pageLifetimes
  • 组件所在页面的生命周期声明对象

父子通信

• 父传子
  • 通过给子组件实例标签添加上属性传过去，子组件在properties可以拿到传过来的值
• 子传父
  • 通过triggerEvent方法 类似于 vue 的emit
  • 父级接收数据则通过给组件实例标签绑定 自定义事件名，获取该组件的类或id名的方式来拿到组件的实例

      // 子组件
      handleBack(){
        this.triggerEvent('myevent', { params: '传值' }, {})
      }
      // 父组件
      // wxml
      <view class="container log-list">
          <componts-tag-name class="componts-tag-name" name="{{logsData}}" bind:myevent="handleEvent"></componts-tag-name>
      </view>
      // js
      console.log(this.selectComponent('.componts-tag-name').data) //获取组件实例
      console.log(e.detail) //获取传输的数据