小程序组件之间的通信

Posted 2020-12-12 世界之大

前言：

其实之前就想写这个的，因为我觉得这么模块化的框架，组件之间通信是非常重要的，也是最经常用到的一块儿，

只是之前在项目里一直没用到跨组件通信，现在用到了，也会用了，就一起写出来得了 :）

 

一、父、子组件之间的通信

注：首先我们先将子组件在父组件中注册，并且在父组件上使用！！！            
1.创建组件：  
　　　　　在微信开发者工具中，我们可以直接创建组件；
　　　　　先右键创建一个文件夹，然后在创建的这个文件夹上右键，新建Component；
　　　　　这样就成功的创建了一个组件；
2.在父组件中注册，并使用：
　　　　　首先，我们去到父组件中的.json文件中，在"usingComponents"中进行注册
　　　　　例: "usingComponents":{
　　　　　　　　"自定义name":"子组件的路径（可以是绝对路径，也可以是相对路径）"
　　　　　　　　}
　　　　　注册完之后，我们就可以使用了，在父组件的.wxml文件中,直接使用
　　　　　例： <b-detail-swiper /> （里面填的就是我们在注册时，起的自定义name）

----------------------------华丽的分割线-------------------------------

1.父组件向子组件传递数据
　　　　　父组件向子组件传递数据，可以传递number、array、object、string等数据
　　　　　以上传递是数据是在项目中常用的，当然null跟undefined也是可以传递的
　　　　　举个例子吧：我们要像轮播图组件中传递几张图片
　　　　　注：imgList是我们自定义的名字，也是要在子组件中接收的名字
　　　　　　　{{imgList}}中的imgList是我们父组件中js文件中data中的数据
　　　　　例：<b-detail-swiper imgList="{{imgList}}" />
　　　　　-----------------上面的代码就是我们父组件向子组件传递数据的过程--------------------
　　　　　父组件中传递了数据，子组件中就要接收参数
　　　　　子组件中的.js文件中有一个Component对象，在这个对象中有一个properties的对象
　　　　　例子：properties：{
　　　　　　　　　　imgList：{
　　　　　　　　　　　　type:Array      //type: 数据类型（根据传递过来的数据进行填写）
　　　　　　　　　　　　value：[]　　　　 //value:默认值（当你没有传递值的时候，就使用value中的值，类似default）　　　　
　　　　　　　　　　}
　　　　　　　　}
　　　　　这样就接收到了父组件传递过来的数据，在子组件中的.wxml文件中使用mastache语法：{{imgList}}引用

2.子组件向父组件传递自对应事件
　　　　　举个例子：我们在子组件中的wxml中，使用bind：tap监听了一个onClick方法
　　　　　在.js文件中的Component对象中的methods中使用onClick方法
　　　　　在onClick方法使用triggerEvent发送自定义事件
　　　　　例：methods:{
　　　　　　　　onClick(){
　　　　　　　　　　console.log(‘监听到点击事件‘)
　　　　　　　　　　const index = 1
　　　　　　　　　　this.triggerEvent("handleClick",{index},{})
　　　　　　　　}
　　　　　　 }
　　　　　//trigerEvent("method-name"，{index}，{});
　　　　　　该方法有3个参数：第一个参数：方法名，第二个参数：要传递的数据，
　　　　　　重点：第三个参数：没有用过，不是很了解，希望有无意或有意看到的朋友在评论区给出自己的理解
　　　　　
　　　　　---------------------------在父组件中使用------------------------------
　　　　　
　　　　　例：
　　　　　在父组件中的.wxml文件中：
　　　　　<b-detail-swiper bind:handleClick="handleClick" />
　　　　　在父组件中的.js文件中
　　　　　在page对象中
　　　　　handleClick(event){
　　　　　　//获取event对象
　　　　　　const index = event.detail.index;
　　　　　　console.log(index)
　　　　　}
　　　　　这样我们获取到子组件向父组件传递的数据