微信小程序的五种传值方式(代码片段)

小野猫子 小野猫子     2023-03-31     392

关键词:

1、使用全局变量传递数据

利用app.js 中的 globalData 将数据存储为全局变量,在需要使用的页面通过getApp().globalData获取数据

app.js

App(
    globalData:
        data:  name: 'demo' 
    
)

使用组件

let app = getApp()

app.globalData.data

2、使用本地存储数据传递

使用小程序提供缓存

同步缓存:wx.setStorageSync 与 wx.getStorageSync 

异步缓存:wx.setStorage 与 wx.getStorage

移除本地缓存:wx.removeStorageSync(同步)、wx.removeStorage(异步)

// 将数据存储在本地缓存中指定的 key 中
wx.setStorgaeSync('data','hello')

// 从本地缓存中同步获取指定 key 的内容
wx.getStorageSync('data')

// 从本地缓存中移除指定 key
wx.removeStorgae('data')

3、使用路由传递数据

传递组件

wx.navigateTo(
  url: 'test?id=1',
  success: (res)=> 
    // 通过 eventChannel 向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage',  data: 'test' )
  
)

使用组件

Page(
  onLoad: function(option)
    console.log(option.query)
    // 监听 acceptDataFromOpenerPage 事件,获取上一页面通过 eventChannel 传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', (data)=> 
      console.log(data)
    )
  
)

4、父子组件使用selectComponent('#页面id'),triggerEvent('方法名','值')

<view id='demo' bind:returnDate='handleReturnDate'><view>
Page(
      
    handleData(data)
       this.selectComponent("#demo").showModal(data);
    
    // 子组件传递过来的值
    handleReturnDate(data)
         console.log(data)
    
)
Component(
    
    methods:
        // 父组件传递过来的数据
        showModal(data)
            console.log(data)
        ,
        submit()
            // 子组件传递数据给父组件
           this.triggerEvent("returnDate", sportsGuidance);
        
    
)

5、子组件通过properties接收:

父组件parent

parent.wxml

<view>
    <child :name='jack'></child>
</view>

parent.json

 
    "usingComponents": 
        "child":"/child/child",
    ,
    "navigationBarTitleText": "父组件的导航标题"

子组件 child

child.wxml

<view>
    父组件传递过来的name:name
</view>

child.js

Component(
    // 接受父组件传递过来的属性
    properties:
        name:String //简化的定义方式

        //name:
            //type:String,
            //value:''
        //
    ,
    // 私有数据,可用于模板渲染
    data:,

    // 组件生命周期声明对象
    lifetime:

    ,
    
   // 组件所在页面的生命周期声明对象
    pageLifetimes:

    ,

    // 事件响应函数和任意的自定义方法
    methods:
    
)

具体其他的属性和使用方法,详见小程序官网Component(Object object) | 微信开放文档

vue组件之间的五种传值方法(父子兄弟跨组件)(代码片段)

一、props/$emit父子组件传值:父传子(自定义属性props)父组件向子组件传参,通过自定义属性的方式进行传参,在子组件中使用prop定义自定义的属性,然后在父组件中通过v-bind指令把需要传递的数据绑定在子组件上... 查看详情

ios开发之界面间传值

...中提供了多种传值方式,今天我们来谈一谈较为常用的五种方式。1、属性传值2、代理传值3、block传值4、单例传值5、通知传值五种方式各有特点,在不同情况可以选择使用不同的方式,接下来我们就说一说这五种传... 查看详情

读取属性配置文件的五种方式(代码片段)

读取属性配置文件的五种方式读取属性配置文件的五种方式读取属性配置的示例属性配置文件方式一:使用注解@Value读取属性配置方式二:使用注解@ConfigurationProperties读取属性配置方式三:使用注解@PropertySou... 查看详情

mvc4.0中viewbagviewdatatempdata和viewmodel几种传值方式的区别(代码片段)

...再是键值对的存储形式,而是dynamic动态类型的,他会在程序运行的过程中被解析。  实例     查看详情

list的五种去重方式(代码片段)

//set集合去重,不改变原有的顺序publicstaticvoidpastLeep1(List<String>list)System.out.println("list=["+list.toString()+"]");List<String>listNew=newArrayList<>();Setset=newHashSet();for(Stringstr: 查看详情

微信小程序跳转传值实现方式

参考技术A无论小程序,还是安卓开发,列表点击跳转传值是必备掌握的基础知识。跳转传值有多种方式,1.可以单穿某个字段,2.可以传对象。这里我只讲下怎么传递对象,在实际开发中,传对象是普遍选择的一种传值方式。下... 查看详情

圣杯布局的五种方式(代码片段)

方法一center还在文本流之中,会影响到后面的元素,不影响前面的元素<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content= 查看详情

nginxupstream的五种分配方式(代码片段)

Nginx负载均衡选项upstream用法举例1、轮询(weight=1)默认选项,当weight不指定时,各服务器weight相同,每个请求按时间顺序逐一分配到不同的后端服务器,如果后端服务器down掉,能自动剔除。upstreambakendserver192.168.1.10;server192.168.1.11;&... 查看详情

ios页面间几种传值方式(属性,代理,block,单例,通知)

...有八大传值方式,下面我们就简单介绍下页面间常用的五种传值方式:(一)属性传值 第二个界面中的lable显示第一个界面textField中的文本首先我们建立一个RootViewControllers和一个DetailViewControllers,在DetailViewCo... 查看详情

物体运动的五种方式(很重要)(代码片段)

1**************************************2物体运动的几种方式:31.4this.transform.position+=Vector3.left*Time.deltaTime;5/*Vector3.left是Vector3的一个属性,表示的是3为坐标系中的向左的单位向量,6实质和newVector3(-1,0,0)是一个效果。还有right,up,down,f 查看详情

进程间的五种通信方式介绍(代码片段)

进程间通信(IPC)介绍 进程间通信(IPC,InterProcessCommunication)是指在不同进程之间传播或交换信息。IPC的方式通常有管道(包括无名管道和命名管道)、消息队列、信号量、共享存储、Socket、Streams等。其中Socket和Streams支持... 查看详情

进程间的五种通信方式介绍(代码片段)

进程间通信(IPC,InterProcessCommunication)是指在不同进程之间传播或交换信息。IPC的方式通常有管道(包括无名管道和命名管道)、消息队列、信号量、共享存储、Socket、Streams等。其中Socket和Streams支持不同主机上的两个进程IPC。... 查看详情

微信小程序中组件的使用(代码片段)

微信小程序中组件的使用:微信小程序中组件定义在项目根目录下components文件夹下,在页面使用的时候需要在页面的json文件中声明,如父组件向子组件传值及子组件向父组件传值:父组件wxml中:通过属性绑... 查看详情

list去除重复数据的五种方式,舒服~(代码片段)

以下介绍五种-不同的方法去除Java中ArrayList中的重复数据1.使用LinkedHashSet删除arraylist中的重复数据LinkedHashSet是在一个ArrayList删除重复数据的最佳方法。LinkedHashSet在内部完成两件事:删除重复数据保持添加到其中的数据的顺序... 查看详情

list去除重复数据的五种方式(代码片段)

List在Java开发中用得非常多,数据处理方面,咱们经常需要对重复数据去重。以下介绍五种-不同的方法去除Java中ArrayList中的重复数据1、使用LinkedHashSet删除arraylist中的重复数据LinkedHashSet是在一个ArrayList删除重复数据的最... 查看详情

jdbc连接mysql的五种方式(代码片段)

测试环境说明mysql数据库:jdbc:mysql://localhost:3306/testIDE:IDEA2022JDK:JDK8mysql:mysql5.7JDBC:5.1.37第一种方式使用静态加载驱动方式,连接mysql这种方式灵活性差,依赖性强publicvoidconnection01( 查看详情

服务探活的五种方式(代码片段)

几个月前,我在《4个实验,彻底搞懂TCP连接的断开》这篇文章中给自己挖了个坑:文中提到的实际问题就是服务探活,今天来填上这个坑。在微服务架构下,服务提供方(Provider)的节点一般不止一个,消费方(Consumer)根据负... 查看详情

微信小程序组件传值(代码片段)

一、子传父子组件<tabbarbind:dialogStatus="isDialog"></tabbar>传值事件,this.triggerEvent(“自定义事件名”,传递的值)this.triggerEvent("dialogStatus",stuatus:true,exhibitionId:res.d 查看详情