electron-vue窗口之间通过主进程传递数据

最新推荐文章于 2024-09-20 15:14:28 发布

@万里挑一

最新推荐文章于 2024-09-20 15:14:28 发布

阅读量1k

点赞数 1

分类专栏： electron-vue 文章标签： vue.js electron 前端

本文链接：https://blog.csdn.net/qq_59599812/article/details/132906713

版权

electron-vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了如何在Electron应用中，通过Electron的IPC（Inter-ProcessCommunication）机制，将数据从渲染进程（如Vue组件）传递到主进程（background.js或main.js），并展示在新窗口中的过程。

摘要由CSDN通过智能技术生成

1.在渲染进程发送数据，先把数据传到主进程。

import { ipcRenderer } from 'electron'//首先引用ipcRenderer,用于打开窗口和传递数据


data(){
   return{
      data:''
  }
}


methods:{
    //点击事件
   ipcRender.send('created-new',JSON.stringify（this.data）) //this.data就是要传递的数据，先把数据传到主进程，打开窗口的同时把数据传递到主进程
}

2.在主进程就是background.js（有的electron-vue不一样，有的版本的主进程是main.js）里接收数据，newValue就是渲染进程传递过来的数据，然后利用webContents进行向窗口的传递。

let newWindow


//某个窗口
function jiuCuo() {
  ipcMain.on('create-new-window', (event,newValue) => {

     console.log(newValue)//newValue就是渲染进程传递过来的数据
    if (newWindow) {
      newWindow.focus() // 存在 则聚焦
      return
    }
    newWindow = new BrowserWindow({
      width: 1107,
      height: 603,
      title: '交换机路由器脚本自动配置工具-纠错',
      closable: true,
      resizable: false,//禁止窗口随意拉伸
      webPreferences: {
        nodeIntegration: true,
        contextIsolation: false,
        enableRemoteModule: true,
        devTools:false
      }
    })
    newWindow.loadURL(winURL + '#/about')
    newWindow.on('closed', () => {
      newWindow = null
    })

     //获取所有窗口对象，发送数据，之后在渲染进程监听'message-from-kiss'即可，
     //监听'did-finish-load'是在窗口创建完毕后传递数据，解决异步问题
      newWindow.webContents.on('did-finish-load',()=>{
      const windows = BrowserWindow.getAllWindows()
      windows.forEach(win => {
          win.webContents.send('message-from-kiss', newValue)
      })
    })


  })
}

3.在渲染进程监听主进程的'message-from-kiss'即可

import { ipcRenderer } from 'electron'


//生命周期
created(){
    ipcRenderer.on（'message-from-kiss',(event,newValue)=>{

       console.log(JSON.parse（newValue）)  //传递过来的数据
}）

}