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

Question

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

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

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

我想用它来过滤在 App1 中输入的关键字，并在 App2 中显示与这些关键字对应的商家。

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

Answer 1

您可以使用 bus .

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);
  }
})

Example .

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

const shared = {
  message:null
}

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

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

Example .