Question

Vue的新手，围绕着主要概念。

我目前有两个独立的组件BodyHero.vue和SelectedHero.vue，我需要将数据从BodyHero.vue传递到SelectedHero.vue。由于它们之间没有父子关系，所以我设置了一个简单的EventBus。

import Vue from 'vue'
export const EventBus = new Vue()

点击BodyHero.vue后，我设置了一个简单的发射器，将信息从SelectedHero.vue传递到router-link。（我正在使用vue-router路由页面并且路由正常工作 - 点击后用户从BodyHero.vue转到SelectedHero.vue。）

这是BodyHero.vue：

的一部分

<template>
 <div class="columns" style="margin: 0px 10px">
  <div v-for="cryptoCurrency in firstFiveCryptoCurrencies" class="column">
    <router-link to="/selected" @click.native="selectCryptoCurrency(cryptoCurrency)">
      <div class="card">
        <div class="card-image">
          <figure class="image is-4by3">
            <img :src="`/static/${cryptoCurrency.id}_logo.png`">
          </figure>
        </div>
        <div class="card-content">
          <p class="title is-5">{{ cryptoCurrency.name }}</p>
        </div>
      </div>
    </router-link>
  </div>
 </div>
</template>

<script>
import { EventBus } from '../../event-bus.js'
const cryptoCurrencyData = require('../../cryptocurrency-data.json')

export default {
 props: {},
 name: 'bodyHero',
 selectCryptoCurrency (cryptoCurrency) {
  EventBus.$emit('cryptoCurrencySelected', cryptoCurrency)
}

在SelectedHero.vue中，在created时，我会听取发射。

 created () {
  EventBus.$on('cryptoCurrencySelected', cryptoCurrency => {
   ...
  })
 }

现在是奇怪的部分。 Chrome / Safari的一切似乎都运行正常 - 用户被路由到下一个组件，成功调用emit并正确传递cryptoCurrency对象。

但是对于Firefox，似乎EventBus.$emit('cryptoCurrencySelected', cryptoCurrency)似乎没有点击（@click.native）。因此，用户被定向到下一个屏幕 - 对象是空的。不确定这里的问题是什么，或者我错过了什么。很高兴听到其他意见！

Vue $ emit和@click处理程序在Firefox

0 个答案: