【问题标题】:Is it possible to push data from one vue app to another?是否可以将数据从一个 vue 应用推送到另一个?
【发布时间】:2017-03-28 01:21:55
【问题描述】:

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

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

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

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

这可能吗?如果可以,Vue 是否有我可以使用的内置功能?

【问题讨论】:

标签: vue.js vuejs2


【解决方案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.

【讨论】:

  • 顺便说一句,你是如何变得如此擅长 Vue 的?就像你什么都知道一样。
  • @ClintonGreen 我真的不知道。不过,与其他框架相比,我确实发现 Vue 非常灵活和直观。我在大约 3 年前编写了 Angular 1 应用程序。我已经在实际工作中使用 Vue 大约七个月了。在这里回答问题确实可以帮助我学习我不知道的东西。在我看来,如果你熟悉 javascript,那么 Vue 就自然而然地出现了。这里提出的很多问题都比 Vue 更多的是 javascript 问题。
  • 很抱歉再次打扰您,此解决方案完美运行,除了由组件控制的元素。为了让他们工作,需要改变什么?
  • @ClintonGreen 哪一个?总线还是共享数据?你有可以给我看的例子吗(jsfiddle/codepen)?
  • 这里是一个例子,如果你点击应用一中的单选按钮,应用二中没有任何更新。但是,如果您在单击单选按钮后单击该按钮。该值将更新应用程序二。 jsfiddle.net/clintongreen/nk5ggonx
猜你喜欢
  • 1970-01-01
  • 2011-05-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-05-24
  • 1970-01-01
  • 1970-01-01
  • 2016-05-05
相关资源
最近更新 更多