微信小程序的组件间三种传值方式

Posted 2023-04-22

参考技术A 第一种：全局传值

第二种：url传值

第三种：Storage传值

微信小程序的五种传值方式

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) | 微信开放文档