小程序--组件的创建与参数传递_小程序triggerevent传递参数

一、父传子

父代码：

wxml:

<no_data id='no_data' title="暂无数据"></no_data>

json

{
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "点赞列表",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#f4f4f4",
    "usingComponents": {
        "no_data": "../../components/no_data/no_data"
    }
}

子组件

wxml

<view class="wx-popup">
  <view class='popup-container'>
    <image class="img" mode="widthFix" src="../../img/public/no_data.png"></image>
    <view class="text1">{{title}}</view>
  </view>
</view>

js

 
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  // 组件的属性列表
  properties: {
    title: {            // 属性名
      type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '登录提示'     // 属性初始值（可选），如果未指定则会根据类型选择一个
    },
    // 弹窗内容
    content: {
      type: String,
      value: '弹窗内容',
      observer: function(newVal, oldVal) {}
    }
  },
  //组件的初始数据
  data: {
    flag: true,
  },
  //组件的方法列表
  methods: {
 
  }
})

二、子传父

父代码

wxml:

<luck bind:myevent="onMyEvent"></luck>

json

{
    "usingComponents": {
        "luck": "../../components/luck/luck"
    }
}

js

  onMyEvent: function (e) {
    console.log(e.detail)
    console.log(e.detail.resultId)
    console.log(e.detail.num)
  }

子组件

js

// triggerEvent第一个参数为方法名，必填；第二个参数为传参，选填；ID,num传给父元素
this.triggerEvent('myevent', { resultId:item.id,num:that.data.num });