微信小程序父子组件传值详解与实践指南-CSDN博客

前言

学到微信小程序的时候发现父子组件传参比较难一点理解，在这里做一下总结

一、微信小程序的组件

簡單來說，微信小程序中的組件和vue中的組件類似，打個比喻，如果把你的程序比作一座高樓，你寫的代碼是其中的建材，那麽組件就是建材組成的砖和瓦，他能把代码包装成一个整体

二、使用步骤

1.软件

这里就使用微信开发者工具和vscode即可，这里不废话了，直接进入传值问题，

如果想了解详细的绑定组件，创建组件之类的可以去B站找找教程

2.传值

前局声明：

我创建的组件名字：Tabs，创建页面test9

test9.json

{
  "usingComponents": {
    "Tabs":"../../components/Tabs/Tabs"
  }
}

1.父组件（页面）向子组件传值

父组件：

这个相比于子向父简单一点

对于父组件可以直接进行传值

<Tabs aaa="123" bind = "handleItemChange"></Tabs>

这里的aaa可以进行动态input赋值data数据，这里为了不那么麻烦，省去了

子组件：

需要在组件自动生成的 properties中加入参数名

类似下面

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 要接受的数据名称
    aaa:{
      // type 要接受的数据的类型
      type:String,
      //value 默认值
      value:""
    }
  }
})

现在子组件就可以组件就可以直接使用接受到的值，在Tabs.wxml加入

<text>
    {{aaa}}
</text>

效果：

2.子组件向父组件传值

怎么说呢，这个相对来说麻烦一点，为了更好地讲解，我用了input来赋值，重点主要是

this.triggerEvent("父组件自定义事件名称"，要传递的值)

子组件：

wxml

<input type="text" bindblur = "handleItemTap"/>

input就是键盘输入，bindblur是焦点失去触发

写好之后，现在的关键是如何获取你写入的值，

在js文件中，在methods加入设立的方法

 handleItemTap(e){
       console.log(e);
    }

这里是我们寻找我们写入的值，e是事件源

在微信开发工具，我们输入一个值后，在调试器中寻找

需要注意的是这里的input并不明显，如果找不到，在代码中寻找位置

调试器点开之后：

可以比较轻易地看到我输入的我的

是在detail中value

下面就是赋值了

handleItemTap(e){
      // console.log(e);
      // 找到位置
      // console.log(e.detail.value);
      this.triggerEvent("child",e.detail.value)
    }

这里便使用到了我们最开始提到的

this.triggerEvent("父组件自定义事件名称"，要传递的值)

子组件的结束，下面开始父组件

父组件：

这里我们设置一个值来保存得到的值

在js的data中加入

child:""

wxml：

<Tabs bindchild="handleItemChange"></Tabs>

这里是自定义事件 child ，是我们之前在子组件内设置的

在js中设立方法，先知道我们把值传到哪了

 handleItemChange(e){
    console.log(e);
    }

调试器点开后：

可以看到是在detail中

我们取到并赋值

 handleItemChange(e){
    // console.log(e);
    // console.log(e.detail)
    const child=e.detail;
    this.setData({
      child
    })
    },

这里的 const child=e.detail; 是取到值，
    this.setData({
      child
    }) 则是赋值给data中的child

获取到之后我们在页面内看一下

在wxml中加入

<view>
    子组件传值：{{child}}
</view>

效果：

总结

对学习的内容进行总结，如果有不足请多多包涵

wx-父子组件之间的传值

前言

一、微信小程序的组件

二、使用步骤

1.软件

2.传值

1.父组件（页面）向子组件传值

2.子组件向父组件传值

总结