#uni.$on()和uni.$emit()

  • uniapp和vue不同的是，vue数据传递直接是单向的，通过eventBus来实现，uniapp已经封装了全局的api.
  • vue示例
    • Vue.prototype.$bus = new Vue();
  • uniapp示例
    1. uni.$emit('selectAccount',{accountInfo:JSON.parse(JSON.stringify(accountInfo))})
    2. uni.$on('selectAccount',(data)=>{
    3.   console.log('接收的数据:' + data);
    4. })
    5. 注意：在页面关闭时在onUnload生命周期中卸载，uni.$off();

#globalData

  1. globalData: {
  2.     data: ''
  3. }
  5. 获取：getApp().globalData.data
  6. 设置：getApp().globalData.data = '';

#store

详情查看：https://www.yuque.com/along-n3gko/ezt5z9/kd11ug

#subNvue页面向vue页面传递数据

  1. //两种获取子窗体不同方式
  2. const subNVue = uni.getSubNVueById('map_widget');
  3. const subNVue = uni.getCurrentSubNVue();  
  5. //发送
  6. subNVue.postMessage({  
  7.     type: 'message',  
  8.     title: '我是来自 subNVue 子窗体的消息',  
  9.     content: 'Hello, map_widget'  
  10. });  
  12. //监听 
  13. subNVue.onMessage((res) => {  
  14.     const data = res.data;  
  15. });

#页面跳转传递数据

  1. let data = {};
  3. uni.navigateTo({
  4.     url: 'url?data' + data
  5. })
  7. 接收
  8. onLoad(option) {
  9.     console.log(option);
  10. }

#nvue向vue通讯

  1. //可以使用uni.$emit和uni.$on进行通讯
  3. //通过应用生命周期在App.vue中进行监听
  4. nvue页面
  5.     uni.postMessage({test: "数据",value:"数据"})
  6. app.vue页面
  7.     onUniNViewMessage:function(e){
  8.       console.log(JSON.stringify(e.data))  
  9.   }

#vue向nvue页面通讯

  • 在 vue 里使用 plus.webview.postMessageToUniNView(data,nvueId) 发送消息，data 为 JSON 格式（键值对的值仅支持String），nvueId 为 nvue 所在 webview 的 id ``` //vue发送数据

//nvue接收数据

const globalEvent = weex.requireModule(‘globalEvent’); created() { globalEvent.addEventListener(“plusMessage”, e => { console.log(e.data); if (e.data.num) { //存在num时才赋值，在nvue里调用uni的API也会触发plusMessage事件，所以需要判断需要的数据是否存在 this.num = e.data.num } }); }

```