是否可以将数据从一个 vue 应用程序推送到另一个应用程序？

Question

我有一个页面，其中有两个 Vue 应用程序。我无法将它们组合起来，因为我的页面周围散布着 Google 广告，并且 Vue 不允许在实例中使用任何脚本标签。

我想要一种使用类似于props将数据从 App1 推送到 App2 的方法。

例如：用户在 App1 中填写输入，Vue 通过 v-model 保留数据并将该数据发送到 App2。

我想用它来过滤 App1 中输入的关键字并显示与 App2 中的这些关键字相对应的企业。

这可能吗？如果可以的话，Vue 有一个我可以使用的内置功能吗？

Answer 1

您可以乘坐公共汽车。

const bus = new Vue();

new Vue({
  el:"#app-one",
  methods:{
    sendMessage(){
      bus.$emit('send-message', "hello from app one!")
    }
  }
})

new Vue({
  el:"#app-two",
  data:{
    message: null
  },
  mounted(){
    bus.$on("send-message", message => this.message = message);
  }
})

例子。

您还可以在两个 Vue 之间共享数据。

const shared = {
  message:null
}

new Vue({
  el:"#app-one",
  data:{
    shared
  }
})

new Vue({
  el:"#app-two",
  data:{
    shared
  }
})

例子。