小程序组件之间传值_小程序组件传值

小程序传值

1.父传子

需要怎么传：

<children title="我是父组件">

</children>
1
2
3

2.怎么接？

Component({
 ...
  properties: {
    //要接收的属性
    title:{
      //接收的类型
      type:String,
      //接收的默认值
      value:"我是子组件"
    },
    content:{
      type:String,
      value:"此处应该是内容"
    }
  },
  ....
})
// 这里就接受成功了传过来的title
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

二.第二种：子传父

主要通过事件派发，监听模式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jxELyyyR-1618407779927)(F:\实训\笔记\09小程序笔记组件服用\20210412220247222.png)]

1.在子组件中写一个事件，事件的处理函数中写事件派发，触发父组件的自定义事件


this.triggerEvent('自定义的事件名',要传递的值,事件选项)

1
2
3
4
5

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WJl0wNdq-1618407779930)(F:\实训\笔记\09小程序笔记组件服用\20210412220247222.png)]

这里是按钮的点击事件cli，在事件处理函数中配置要触发的自定义事件名字 ‘give’，和传的值’ 我是子组件’

2.父级监听
//在父级引入的子组件中写绑定事件，bind:自定义事件名=“时间名”，这里的自定义事件名就是子组件的配置的give，
mygive是这个自定义事件触发的时间名。

//绑定自定义事件
<children
     

      bind:give="mygive"

  />

 //接受参数
 在父级的mygive事件处理函数中通过默认参数e，来接受传过来的数据，

 mygive(e){
  console.log(e.detail)
},
//e.detail 就是传过来的数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19