小程序自定义组件的使用

引入组件

父组件直接在子组件上面添加一个参数，然后传值，子组件可以直接接受到，

接收到的值可以直接用来渲染到页面上，不需要放到data 里面。

<orderBar orderBar="{{orderBar}}" bind:myEvent='orderBarEvent' />

   json 文件配置组件

{
  "usingComponents": {
     "orderBar":"/components/orderBar/orderBar"
  },
  "navigationBarTitleText": "订单"
}

                            

js 文件，

父组件自定义一个事件，然后子组件就可以通过触发事件传递参数给父组件

  orderBarEvent(data){
    console.log(data.detail.id)
    let index = data.detail.id;
    var tabs = this.data.orderBar;
    // 修改样式
    tabs.forEach((item, idx) => {
      index == idx ? item.active = true : item.active = false;
    })

    this.setData({
      orderBar: tabs
    })

    // 根据不同的id 获取 不同的订单数据
  },

             

1 子组件触发父组件的事件

2 用properties j接受参数

 

   

 properties: {
     orderBar:{
       type:Array,
 //默认值
       value:[]
     }

  },

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


  methods: {
    tapItem(e){
      // 获取id
      var index = e.currentTarget.dataset.id;
      // 触发父函数，并且传值，做相应的操作
      // id 是每一个item都有的，从左到右递增。
      this.triggerEvent("myEvent",{id:index})
    

    }