微信小程序 - 父子组件之间的传值

太过爱你忘了你带给我的痛 2021-08-14 00:57 670阅读 0赞

在做项目过程中，我们会把多个相同的模块做成一个组件，然后供多个页面一起使用，这样可以实现组件复用。下面我来说说如何实现小程序中的父子组件之间的传值。

#### 1、父组件向子组件传值 ####

**子组件是通过 properties 来接收父组件传递过来的值**

###### 例子： ######

**（1）子组件**  
  1）wxml文件

<view class="button-con {
       {type}}">
      <view class='btn-text'>{
       {desc}}</view>
    </view>

2）js文件（通过 properties 接收父组件传递过来的值）

// components/button/button.js
    Component({
      /**
       * 组件的属性列表
       */
      properties: {
        type:String,
        desc:String,
      },
    
      /**
       * 组件的初始数据
       */
      data: {
    
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
    
      },
    })

**（2）父组件**  
  1）在json文件中引入子组件（将 component 设置为true，在 usingComponents 中引入对应的子组件）

{
      "component": true,
      "usingComponents": {
        "cus-button":"../button/button"
      }
    }

2）wxml文件

**（3）如果在一个子组件中引入另一个子组件，对应的方法直接写在methods中（ps：跟第2点讲的子组件向父组件传值一样）**

// components/dialog/dialog.js
    Component({
      /**
       * 组件的属性列表
       */
      properties: { },
    
      /**
       * 组件的初始数据
       */
      data: {
    
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
        close(){
          console.log('子组件关闭弹出啦');
          this.triggerEvent('close');
        },
        ok(){
          this.triggerEvent('ok');
        }
      },
      created(){
        console.log(this.data);
      }
    })

#### 2、子组件向父组件传值 ####

**子组件通过 triggerEvent 方法向父组件传值**

###### 例子： ######

**（1）子组件**  
  1）wxml文件：

2）js文件：

Component({
      /**
       * 组件的属性列表
       */
      properties: {},
    
      /**
       * 组件的初始数据
       */
      data: {
          desc:'关闭'  
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
        cancel(){
          // 不带参数的
          this.triggerEvent('cancel');  
        }，
        comfire(){
          // 带参数的
          this.triggerEvent('comfire',this.data.desc);
        }
      }
    })

**（2）父组件**  
  1）现在json文件中引入这个组件，然后在wxml文件中这样写：

<cu-button class="btn_bom"  bindcancel="cancel"></cu-button>
     <cu-button class="btn_bom"  bindcomfire="comfire"></cu-button>

2）js文件：

Page({
      cancel: function(){
        console.log('取消')
      },
      comfire: function(e){
         // e.detail 自定义组件触发事件时提供的detail对象
         console.log('确认',e.detail)
      }
    })