如何从组件中获取变量并在另一个组件或文件中使用它

// ParentComponent.vue
<template>
  <ChildComponent :variable="myVariable" />
</template>
<script>
export default {
  data() {
    return {
      myVariable: 'Hello, World!'
    }
  }
}
</script>

// ChildComponent.vue
<template>
  <div>{{ variable }}</div>
</template>
<script>
export default {
  props: ['variable']
}
</script>

// globals.js
export const myVariable = 'Hello, World!'

// OtherComponent.vue
<template>
  <div>{{ myVariable }}</div>
</template>
<script>
import { myVariable } from 'globals.js'

export default {
  data() {
    return {
      myVariable
    }
  }
}
</script>

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

// ComponentA.vue
<template>
  <button @click="sendVariableToComponentB">Send Variable</button>
</template>
<script>
import { EventBus } from 'EventBus.js'

export default {
  methods: {
    sendVariableToComponentB() {
      const variable = 'Hello, World!'
      EventBus.$emit('variable-updated', variable)
    }
  }
}
</script>

// ComponentB.vue
<template>
  <div>{{ receivedVariable }}</div>
</template>
<script>
import { EventBus } from 'EventBus.js'

export default {
  data() {
    return {
      receivedVariable: ''
    }
  },
  mounted() {
    EventBus.$on('variable-updated', (variable) => {
      this.receivedVariable = variable
    })
  }
}
</script>