时间戳

首页 > 解决方案 > 在两个兄弟组件之间传递一个数组

javascript - 在两个兄弟组件之间传递一个数组

问题描述

所以我有“主页”组件，用户可以在那里创建二维码。我有一种方法可以创建这些 QR 项的数组。现在我需要将此数组传递给其他组件，它是兄弟组件，而不是子父/父子关系。

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

应用程序.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>

主页.vue

<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>

历史.vue

   <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>

main.js

export const eventBus = new Vue();

标签： javascriptvue.js

解决方案

尝试以下代码段：

Vue.component('home',{
  template: `<div>
    <h2>Home Component</h2>
    <button @click="sendQrCode">Check</button>
  </div>`,
  methods:{
    sendQrCode:function(){
      this.$root.$emit("codeSent",["code1","code2","code3"]);
    }
  }
});

Vue.component('history',{
  template: `<div>
    <h2>History Component</h2>
    {{ codes }}
  </div>`,
  data:function(){
    return {
      codes:null
    }
  },
  created(){
    let that = this;
    this.$root.$on("codeSent",(payload)=>{
      that.codes = payload;
    })
  }
  
});

new Vue({
  el:"#app"
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<html>
  <body>
    <div id="app">
      <home></home>
      <hr />
      <history></history>
    </div>
  </body>
</html>

推荐阅读