Javascript 在两个同级组件之间传递数组

所以我有“家”组件，用户可以在那里创建二维码。我有一个方法可以创建这些QR项的数组。 现在我需要将这个数组传递到另一个组件中，它是一个同级组件，而不是子-父/父-子关系

我试图创建eventBus，但进展不顺利

App.vue

<template>
<div class="container-fluid">
  <app-header></app-header>
      <div class="row">
      <div class="col-sm-12">
      <router-view></router-view>
      </div>
      </div>
</div>

</template>

<script>
import { eventBus } from './main';
import Header from './components/Header.vue';
export default {
  data() {
    return {
      urls: []
    }
  },
  created() {
    eventBus.$on('updateUrls', (data) => {
      this.urls.push(this.data);
    })
  },
  components: {
    'app-header': Header
  }
}
</script>

<style>

</style>

<template>
    <div>
        <h2>Welcome to QR</h2>
        <p>Generate qr codes on your own website</p>
        <hr>
        <div class="form-group">
            <label>Your website address:</label>
            <input type="text" class="form-control" v-model="address">
        </div>
        <a :href="url" target="_blank" class="btn btn-primary" :disabled="!address">Generate</a>
        <button class="btn btn-primary" :disabled="!address" @click="saveData">Save</button>
        <button class="btn btn-secondary" @click="clearInput" :disabled="!address">Clear</button>
    </div>
</template>

<script>
    import axios from 'axios';
    import { eventBus } from '../main';

    export default {

        data() {
            return {
                address: '',
                prefix: `https://www.qrtag.net/api/qr_4.png?url=`,
            }
        },

        computed: {
            url() {
                const url = this.prefix + this.address;
                return url;
            }
        },
        methods: {
            clearInput() {
                this.address = ''
            },
            saveData() {
                const data = {
                    url: this.url,
                    date: new Date()
                }

                eventBus.$emit('updateUrls', this.data);
            },
        }
    }
</script>

   <template>
    <div>
        <router-link tag="a" class="nav-link" to="/dashboard">Generate another QR</router-link>
        <p :urls="urls" v-for="link in urls">{{ link.url }}</p>
    </div>
</template>

<script>
import { eventBus } from '../main';
    export default {
        props: ["urls"],
        data() {
            return {

            }
        }
    }
</script>

---

你可以让父母成为真理的源泉。我的意思是，当一个新的二维码被创建时，子

$将新的值发送给父级，然后父级将其存储在一个数组中

一旦家长掌握了信息，就很容易将其分发给所有的孩子
 尝试以下代码片段：


Vue.component（'home'{
模板：`
主分量
检查
`,
方法：{
sendQrCode:function（）{
这是.$root.$emit（“codeSent”、[“code1”、“code2”、“code3”）；
}
}
});
Vue.组件（“历史记录”{
模板：`
历史组件
{{code}}
`,
数据：函数（）{
返回{
代码：空
}
},
创建（）{
让那=这；
此.$root.$on（“codeSent”，（有效负载）=>{
即：代码=有效载荷；
})
}
});
新Vue({
el:“应用程序”
});


如果不想使用Vuex，请尝试向上提升状态或使用EventBus什么是提升状态？这意味着让两个同级组件的公共父组件保持状态，然后将数据作为
道具向下传递，而不是让其中一个子组件保持数据。在这种情况下，它意味着让
Home
和
History
的父级保留数组，而不是
Home
保留数组要使用eventBus，我必须创建click listener，对吗？我希望在不触发事件的情况下传递数据。看起来像是
Home.vue
和
History.vue
组件由vue路由器单独呈现，并且一次只呈现一个（显然）。这两个组件不会同时呈现，这使得在这两个组件之间共享数据非常困难。不使用Vuex的原因是什么？当我在父应用程序中使用路由器视图时，尝试使用事件总线。仍然不工作（已编辑的问题）。为什么需要事件总线？这是一个非常简单的设置。我将试着给你一个例子，我正在使用路由器视图来渲染组件，这样就不起作用了。好吧，那么不使用Vuex的原因是什么？我最终使用了它，它工作得很好，但我认为这对于我的需要来说是一个过度的技巧。
export const eventBus = new Vue();