记录一下-------微信小程序自定义组件与页面的相互传参

写在前面：

转载自：https://www.jb51.net/article/245000.htm

1、父传子

# 组件wxml文件
<!--componentes/com/com.wxml-->
<!-- name值是由页面决定的 -->
<view>{{name}}大帅逼</view>  
# 组件js文件
// componentes/com/com.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    name:{
      type: String,    //属性的类型
      value: 'jeff'  // 属性的默认值，如果页面没有给这个name赋值，就使用这个value的值
    } 
  },
  /**
   * 组件的初始数据
   */
  data: {
  },
#页面中wxml
<my-con  title="{{变量名}}"><my-con/>
 #再组件中
   properties: {
    title:{
      type:String,
      value:"你好"
    }
  }
# 页面wsml文件
<com name='chary'></com>  //可以是固定值
<com name = "{{name1}}"></com> //这里的可以是变量

2、子传父

# 组件wxml文件
<button bind:tap="click">加一</button>
# 组件js文件
methods: {
    click:function(e){
      this.triggerEvent("jia1")  // 传递jia1事件，不带参数的
      # this.triggerEvent("jia1",{num:e.currentTarget.dataset.num})  //带参数的
    }
  }
# 页面wxml文件 捕获事件
<view>{{num}}</view>
<com bind:jia1="jia"></com>
# 页面js文件
// pages/test1/test1.js
Page({
  data: {
    num:0
  },
  jia:function(e){
    this.setData({
      num: this.data.num + 1
  })
  }
})