Vue：如何从全局总线（从另一个组件）获取值

Question

我正在学习Vue，我想看看如何从一个组件到另一个组件共享价值。我看过其他问题，但无法解决这个问题。

我有一个称为Uf的组件，它从api（货币汇率）获得一个值。另一方面，我有一个组件，用户可以在其中写下另一种货币以获得转换。问题在于将价值从一种成分转移到另一种成分。

我正在使用（或尝试使用）全局总线，但它尚不起作用，我也不知道自己在做什么错。

CalcUF.vue

version: '3'

services:

  app:
    build: .
    image: golang:latest
    volumes:
      - .:/go/src/github.com/dickmanben/qube-auth
    working_dir: /go/src/github.com/dickmanben/qube-auth
    command: bash -c "go get ... && go build -o main . && ./main"
    ports: 
      - 8080:8080
    links:
        - mongodb
    depends_on:
        - mongodb

  mongodb:
    image: mongo:3.4.3
    volumes:
      - ./data/db:/data/db

Uv.vue

<template>
<div id="app">
  <h2>Calcular UF</h2>
  <label>Ingresa la cantidad en pesos: </label>
  <input type="number" v-model="inp_clp" v-on:change:multiply>
   <p><label for="total">El total en UF equivale a:</label>
   <p >{{total}}</p>

</div>
</template>


<script>
import { serverBus } from '../main';
import Uf from './Uf.vue'

  export default {
  name: 'CalcUf',
  components: { 
    Uf
  },
  data() {
    return {
        precio_uf: 0,
        total: 0,
        inp_clp: 0

    }
  },
  created() {
    // Using the server bus

    setInterval(() => {
        this.multiply;
      }, 1000);

    },
  mounted() {
    serverBus.$on('valorUf', () => this.precio_uf = uf);
  },
  methods: {
    multiply () {
        this.total = this.inp_clp * this.precio_uf;
    }
  }
}   
</script>

我没有收到任何错误，但没有得到任何结果。 <template> <div id="app"> <p>La unidad de fomento está a ${{ new Intl.NumberFormat("es-CL").format(uf) }}.</p> </div> </template> <script> import { serverBus } from '../main'; export default { name: 'Uf', data() { return { uf : '' } }, created() { fetch('SOMEAPI') .then((res) => res.json()) .then((data) => { this.uf = data.uf.valor; }); }, mounted () { serverBus.$emit('valorUf', this.uf); }, methods: { valorUf () { return this.uf; } } } </script> 保持为0。

编辑：

我想从Uf.vue传递到CalcUf.vue进行乘法，即较高的值（在输入字段上方的27565.76）。