小程序数据传递和自定义事件

数据传递

1、使用全局变量：可以在app.js中定义一个全局的变量，然后在其他页面中通过 getApp().globalData.xxx 的方式来访问该变量。

App({
  globalData: {
    userInfo: null
  }
})

在其他页面或组件中，可以通过getApp().globalData获取应用实例的全局变量进行访问。

2、使用缓存API：可以使用小程序提供的缓存API，如wx.setStorageSync()和wx.getStorageSync()等，将数据存储在本地，然后在其他页面中通过wx.getStorageSync()读取该数据。

3、页面跳转时传参：在使用wx.navigateTo()或wx.redirectTo()跳转时，可以在url中传递参数。如wx.navigateTo({url: ‘/pages/detail/detail?id=123’})，在detail页面中可以通过options.id获取该参数。

4、发送事件：可以使用小程序提供的事件机制，在发送方使用wx.event.emit()发送事件，在接收方使用wx.event.on()监听事件，以实现数据的传递。

父子组件传值

在微信小程序中，父子传值可以通过以下两种方式实现：

1. 页面跳转时传递参数：在使用wx.navigateTo()或wx.redirectTo()跳转时，可以在url中传递参数。例如，在父页面中使用如下代码跳转到子页面：

wx.navigateTo({
  url: '/pages/child/child?id=123'
})

然后在子页面中可以通过options.id获取传递的参数：

Page({
  onLoad: function (options) {
    console.log(options.id) //输出123
  }
})

2. 使用事件机制：可以在父组件中定义一个事件，然后在子组件中通过绑定该事件来实现传值。例如，父组件中定义了一个事件：

Page({
  data: {
    msg: 'Hello World'
  },
  onEvent: function (e) {
    console.log(e.detail) //输出Hello World
  }
})

然后在子组件中通过triggerEvent()触发该事件，并将数据作为参数传递：

Component({
  properties: {},
  data: {},
  methods: {
    onTap: function () {
      this.triggerEvent('event', {detail: this.data.msg})
    }
  }
})

在子组件中，通过onTap()触发事件，并将msg的值作为参数传递给父组件的onEvent()方法。

3. 组件间数据传递：在微信小程序中，可以通过父子组件之间传递数据。在父组件中定义一个数据变量，将其传递给子组件，在子组件中可以将该数据作为properties进行接收。

   父组件中：

   <view>
     <child-component data="{{data}}"></child-component>
   </view>
   

   子组件中：

   <view>{{data}}</view>
   <Component>
     properties: {
       data: {
         type: String,
         value: ''
       }
     }
   </Component>
   

在子组件中，上述定义的data属性可以通过this.data.data的方式进行访问。

自定义事件

小程序自定义事件是指开发者可以自定义事件名称和触发方式的事件。通过自定义事件，开发者可以实现组件之间的数据传递和交互。

实现一个自定义事件的步骤如下：

1. 在组件的js中定义自定义事件的名称和触发方式

   例如，定义一个名为myevent的自定义事件，并在组件中某个方法中触发该事件：

   Component({
     methods: {
       onTap: function(e) {
         this.triggerEvent('myevent', { myData: 'hello' }, {})
       }
     }
   })
   

   在上述代码中，triggerEvent方法用于触发自定义事件myevent，并可以传递一个对象作为事件参数，该对象中的myData属性即为需要传递的数据。

2. 在组件的wxml中绑定自定义事件

   在需要监听自定义事件的元素上绑定bind:{eventName}属性，例如：

   <view bind:myevent="onMyEvent">我是一个元素</view>
   

   在上述代码中，当组件中触发myevent事件时，将会触发onMyEvent方法。

3. 在组件的js中实现自定义事件处理函数

   在组件的js中通过声明一个与bind:{eventName}属性中指定的方法同名的方法，作为自定义事件的处理函数，例如：

   Component({
     methods: {
       onMyEvent: function(event) {
         console.log(event.detail.myData) //将会输出"hello"
       }
     }
   })
   

   在上述代码中，event是一个包含事件详细信息的对象，其中detail属性即为触发自定义事件时传递的事件参数，通过detail.myData即可获取到需要传递的数据。

通过上述方式，就可以实现在小程序中自定义事件的定义和调用。需要注意的是，自定义事件只能在组件内使用，不能在页面中使用；同时，在使用自定义事件时，需要注意事件名称的命名规则和使用方式。