微信小程序组件与页面互相传值

1.外界对组件内部传值（父传子）

组件properties属性的应用

① 定义组件内部要接受外部的值

在组件的js文件中（这里我定义了一个number类型的proID，还有一个数组segmentItems）

  properties: {
    proID:{
      type:Number,  //type：作用是指明proID这个值的类型
      value:99      //默认值
    }，
    segmentItems:{
      type:Array,
      value:[]
	}
  },

② 定义页面要传输给组件内部的值

在使用组件的页面的js文件中定义好要传递的数据（这里的projectId就是我要传到组件的proID）

data: {
    projectId:111
  },

③ 传输数据

在页面的wxml中引用组件的地方用以下方式传输即可

<cjn_projectUpLoad  proID="{{projectId}}"/>

④ 组件内部对properties内值的调用

这里不赘述，properties的使用是和data一样的。

this.setData({ })也适用于properties。

2. 组件内部对外界传值（子传父）

自定义事件

① 在组件method列表内定义并且触发一个自定义事件

{% asset_img image-20210808203036651.png 图片说明 %}

② 在外部页面的wxml中引用组件的地方用bind：绑定自定义事件

bind:pushFilePath="_getFilePath" 

{% asset_img image-20210808203252153.png 图片说明 %}

③ 在外部页面的js文件中创建方法获取到组件传递的数据

_getFilePath: function (evt) {
    this.setData({
      filePath:evt.detail.filePath
    })