zoukankan      html  css  js  c++  java
  • 小程序组件之间的通信

    前言:

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

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

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

    注:首先我们先将子组件在父组件中注册,并且在父组件上使用!!!            
    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}}


  • 相关阅读:
    [Cocoa]iOS中的url编码问题
    [Cocoa]深入浅出Cocoa之消息
    [Cocoa]深入浅出iOS之生命周期
    [Cocoa]深入浅出Cocoa之Bonjour网络编程
    一分钟煮鸡蛋好吃又有营养 生活至上,美容至尚!
    教你几个清肠绝招,做个娇嫩无毒美人 生活至上,美容至尚!
    每天一杯简单排除肠道毒素 生活至上,美容至尚!
    防止电脑辐射必看 保护好你的肌肤 生活至上,美容至尚!
    美容去皱法的误区 生活至上,美容至尚!
    10分钟日本瘦腿操 生活至上,美容至尚!
  • 原文地址:https://www.cnblogs.com/a973692898/p/13187681.html
Copyright © 2011-2022 走看看