现如今一块大屏点击跳转实现第二屏跳转，越来越多的公司要求实现这种需求，我接受的项目就遇到这个需求，当时我是在原有写好的项目上新增加的需求，所以比较简单，但还是想给大家分享一下自己的踩雷过程。

最痛苦的就是刚接手看原有代码了：

首先先说一下参考的技术栈是：Presentation API：https://googlechrome.github.io/samples/presentation-api/

官方说的是只有英文文档，没有中文文档，没办法只能硬看，谁让咱遇到这个需求了呢。。。。呜呜

因为我这个项目做了页面组件拆分，所以做了一些组件通信，不过都可以能看懂

首先讲一下父组件需要做的事情

这个是引入的一个js文件，关于大屏跳转的

这里是为了实现组件通信

我们这里参数调用主要是为了实现接下里的一个效果，就是把我们需要发送给第二屏的信息，通过路由url的形式发送给第二快屏幕，所以接下来我们需要进行下面的操作；

这两张图片是 targetChanged方法里面的，对应的注释写的很明白了

以上工作完成后接下来就到了我们刚才父组件的子组件里面需要做的事情了，既然我们需要实现通信 ，

也就是刚才父组件里面写的updateMsg这个就派上用场了，子组件inject这个方法，然后实现发送信息

这样就可以实现发送消息给第二屏了，并且把这个消息成功的拼接到了第二屏的路由url上了

接下来是第二块屏幕的处理，从路由url里面获取你想要的对应的属性

这是我想要的

截止到目前第二块大屏就可以实现第一次点击跳转的时候发送的信息了，但是你会发现此事的数据并不是响应式的，所以我们需要把数据做成响应式的，官网有例子，我这边就直接上代码了。

注意这里接收的参数是我文章里面的第四章图片里面   presentationConnection.send(JSON.stringify(newval));这个方法发过来的

  presentationConnection.send(JSON.stringify(newval));这个方法只能发送一个属性，如果你需要发送多个属性就需要转为json字符串发送了。这个方法写好后，对应的页面里面

这样写一下就可以实现我们的响应式数据了，第一块大屏点击，第二块大屏我想要的数据就可以实现响应式了，然后页面里面你监听watch一下就可以了

到此就实现了一个简单的大屏点击跳转，然后数据实现响应式了，如果有大佬有更好的方法，欢迎留言互相学习。