微信小程序父子组件传值

àì夳堔傛蜴生んèń 2022-11-15 12:22 293阅读 0赞

## 父传子 ##

小程序的父组件可以是page类型，也可以是component类型，子组件一定是component类型。

<view class="container">
      我是父组件
      <child parent="{ {parent}}"></child>
    </view>
    
    
    <view class="child">我是子组件
      <view class="parent-value">{
       {parent}}</view>
    </view>

// 父组件
    Page({ 
      /** * 页面的初始数据 */
      data: { 
        parent: '我是父组件的值'
      }
    })
    
    // 子组件
    Component({ 
      /** * 组件的属性列表 * 父组件传过来的值 */
      properties: { 
        parent: { 
          type: String,     // 类型
          value: ''         // 默认值
        }
      }
    })

### 效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTMxNjk5_size_16_color_FFFFFF_t_70]

## 子传父 ##

子传父一般需要通过触发事件。

<view class="container">
      我是父组件
      <view hidden="{ {show}}" class="child-change">父组件的元素</view>
      <child parent="{ {parent}}" bind:changeShow="changeShow"></child>
    </view>
    
    
    <view class="child">我是子组件
      <button class="child-btn" bindtap="change">{
       {btnText}}</button>
    </view>

// 父组件
    Page({ 
      /** * 页面的初始数据 */
      data: { 
        show: false
      },
      changeShow(e) { 
      	// e.detail里面存放了子组件传过来的值
        this.setData({ 
          show: e.detail.show
        })
      }
    })
    
    // 子组件
    Component({ 
      /** * 组件的初始数据 */
      data: { 
        // 按钮文字
        btnText: '隐藏父组件元素',
        type: 1
      },
    
      /** * 组件的方法列表 */
      methods: { 
        change() { 
          if(this.data.type === 1) { 
            this.setData({ 
              type: 2,
              btnText: '显示父组件元素'
            })
            // 向父组件传递事件，传值必须为对象形式
            this.triggerEvent('changeShow', { show: true});
          }else { 
            this.setData({ 
              type: 1,
              btnText: '隐藏父组件元素'
            })
            this.triggerEvent('changeShow', { show: false});
          }
        }
      }
    })

### 效果 ###

![在这里插入图片描述][20210401115808955.gif]

> 参考文档：  
> [组件间通信与事件 | 微信开放文档][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTMxNjk5_size_16_color_FFFFFF_t_70]: /images/20221022/256844b141664f37b2b8993011ac5977.png
[20210401115808955.gif]: https://img-blog.csdnimg.cn/20210401115808955.gif
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html