如何在Vue中将值从一个文件传递到另一个文件？

<template>
  <child-component :value="data"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      data: 'Hello World',
    };
  },
};
</script>

<template>
  <div>{{ value }}</div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true,
    },
  },
};
</script>

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    data: 'Hello World',
  },
  mutations: {
    updateData(state, payload) {
      state.data = payload;
    },
  },
});

<template>
  <div>{{ data }}</div>
  <button @click="updateData">Update Data</button>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['data']),
  },
  methods: {
    ...mapMutations(['updateData']),
  },
};
</script>

<template>
  <div>{{ data }}</div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['data']),
  },
};
</script>

import Vue from 'vue';

const eventBus = new Vue();

export default eventBus;

import eventBus from './eventBus.js';

export default {
  methods: {
    sendData() {
      eventBus.$emit('data-updated', 'Hello World');
    },
  },
};

import eventBus from './eventBus.js';

export default {
  data() {
    return {
      data: '',
    };
  },
  created() {
    eventBus.$on('data-updated', (payload) => {
      this.data = payload;
    });
  },
};