微信小程序自定义组件的数据传递父组件子组件传递值

最新推荐文章于 2024-04-20 04:11:08 发布

Seven_night♛

最新推荐文章于 2024-04-20 04:11:08 发布

阅读量1k

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/seve_nnight/article/details/119542226

版权

24 篇文章 1 订阅

订阅专栏

1.父组件向子组件传递数据
parent.wxml

<my-component name="{{name}}" age="{{age}}"></my-component>

parent.js

data: {
  name: 'Peggy',
  age: 25
}

child.js

properties: {
  name: {
    type: String,
    value: '小明'
  },
  age: Number
}

父组件向子组件传值以属性的形式，子组件以properties接收，并可指定数据类型type以及默认值value。
在wxml里可直接以{{name}}的形式使用，而在js中以this.properties.name获取。

2.子组件向父组件传值
child.js

methods: {
  changeName() {
    this.triggerEvent('changeName', {
      name: '李四'
    })
  }
}

parent.wxml

<my-component name="{{name}}" age="{{age}}" bindchangeName="changeName">
</my-component>

parent.js

changeName(event) {
  console.log(event.detail)
  // { name: '李四' }
}

子组件向父组件传递数据使用this.triggerEvent方法，这个方法接受3个参数：
this.triggerEvent(‘myevent’, myEventDetail, myEventOption);

myevent为方法名，
myEventDetail是传到组件外的数据，
myEventOption为是否冒泡的选项，有三个参数可以设置：

bubbles    默认false 事件是否冒泡
composed 默认false 事件是否可以穿越组件边界
capturePhase 默认false 事件是否拥有捕获阶段

在父组件监听事件bindchangeName=“changeName”，在changeName方法里有一个event参数，可以从event.detail里拿到组件内部传出来的值。

关注