• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序组件之间的通信

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前言:

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

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

 

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

注:首先我们先将子组件在父组件中注册,并且在父组件上使用!!!            
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)
     }
     这样我们获取到子组件向父组件传递的数据

 

 二、非父子组件之间的通信

wx小程序中的非父子组件通信其实特别简单,
在我们创建小程序的时候就会生成一个app.js、app.json等文件
我们的非父子组件之间的通信就需要用到app.js文件

例子:
app.js文件:
      App({
          onLaunch:function(){
            
          },
          addObj(obj){
            this.globalData.proList.push(obj)
          }
          globalData:{
           name:'',
           proList:[] 
          }
        })
注:home组件跟profile组件不是父子组件的关系

在home跟profile组件的js文件中我们先进行引用,这一步是必须的,先获取全局对象嘛
 const app = getApp();

------------------------------发送数据----------------------------------

home.js文件:
  const app = getApp();
  Page({
    onLoad:function(options){
      app.globalData.name = 'b-clouds'
    }
  })
在home.js文件中,我们将app中的globalData中的name属性的值改为'b-clouds',
这时全局对象中的name属性的值就变成了'b-clouds'

---------------------------------获取数据----------------------------------

profile.js文件:
  const app = getApp();
  Page({
    onLoad:function(options){
    
    },
    //onClick只是一个单纯的点击事件
    onClick(){
      const name = app.globalData.name;
      console.log(name)
      //控制台打印出来的结果就是: b-clouds
    }
  })

上面的只是String类型数据的传递,那么其他类型呢?
  number跟String类型传递数据的方法是一样的

-------------------------------传递数据---------------------------------

  而对象和数组传递数据的方式是一样的
  例子:
home.js:
   Page:{
    data:{
      id:1001,
      name:'b-clouds',
      age:22,
      height:1.81
    }
    onClick(){
      const obj = {}
      obj.id = this.data.id
      obj.name = this.data.name
      obj.age = this.data.age
      obj.height = this.data.height
      app.addObj(obj)
    }
   }
这样在home文件中就将全局对象中的proList的值改变;

---------------------------------获取数据-----------------------------------

 profile.js文件:
   const app = getApp();
   Page({
    data:{
     proList:[]
    }
    //监听页面显示
    onShow:function(){
      const proList = app.globalData.proList
      this.setData({
        proList //es6增强语法: proList:proList === proList
      })
    }
   })
 profile.wxml文件:
   这里就可以直接使用mastache语法使用proList {{proList}}


 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序npm引入vant-weapp库的方法发布时间:2022-07-18
下一篇:
微信小程序-replace方法不存在发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap