2.子组件Component({_小程序组件动态传值">
当前位置:   article > 正文

微信小程序组件间传值_小程序组件动态传值

小程序组件动态传值

一. 微信小程序父组件向子组件传值

1.父组件可以直接传参或者使用数据绑定向子组件动态传递数据
组件在父组件内写法:

  1. <view>
  2. <!-- 以下是对一个自定义组件的引用 -->
  3. <my-component inner-text="Some text" numberA='5' numberB='{{dataFieldA}}'></my-component>
  4. </view>

2.子组件

  1. Component({
  2. properties: {
  3. // 这里定义了innerText属性,属性值可以在组件使用时指定
  4. innerText: {
  5. type: String,
  6. value: 'default value',
  7. },
  8. numberA: {
  9. type: Number,
  10. value: 0
  11. },
  12. numberB: {
  13. type: Number,
  14. value: 0
  15. }
  16. },
  17. data: {
  18. // 这里是一些组件内部数据
  19. },
  20. methods: {
  21. // 这里是一个自定义方法
  22. }
  23. })

3.然后在子组件js的this.properties.innerText.value就可以访问到父组件传进的dataField的值,或者wxml中直接按照data的使用方式{{propname}}来使用

 

二. 微信小程序子组件向父组件传值

1.子组件在需要传值时,使用triggerEvent传给父组件一个事件( myevent ),并传递想要给父组件的值( sonParam )

this.triggerEvent('myevent', {sonParam: false})

2. 在父组件中,子组件的引用处,通过这个myevent事件绑定一个方法( onMyEvent )

<customSelector bind:myevent="onMyEvent">

3.在父组件的js中,定义这个方法onMyEvent,在这个方法内就可以获取到子组件传递过来的值了

  1. onMyEvent: function(e) {
  2. let sonParam = e.detail.sonParam
  3. }

三. 微信小程序父组件调用子组件的方法

1.在子组件的里的methods里定义一个方法

  1. // components/header/header.js
  2. Component({
  3. properties: {
  4. },
  5. data: {},
  6. methods: {
  7. getrun() {
  8. console.log('我是子组件的方法')
  9. },
  10. }
  11. })

2.在父组件的调用里定义一个id唯一标识
按钮用来获取子组件的方法

  1. <header id="header"></header>
  2. <button bindtap="getson">获取子组件的方法</button>
  1. getson() {
  2. var header = this.selectComponent("#header")
  3. console.log(header.data) //子组件的数据
  4. header.getrun() //子组件的方法
  5. },

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/花生_TL007/article/detail/298523
推荐阅读
相关标签
  

闽ICP备14008679号