Typescript 通过来自另一个组件的事件调用vue组件属性设置器

我有一个带有App.vue的vue应用程序，如下所示：

<template>
  <div id="app">
    <AppNavBar v-on:pushPageContent="onPushPageContent"></AppNavBar>
    <router-view></router-view>
    <Home :pageContent="pageContentChanges"></Home>
    <AppFooter></AppFooter>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import AppNavBar from './components/AppNavBar.vue'
import AppFooter from './components/AppFooter.vue'
import Home from '@/views/Home.vue'

@Component({
  components: {
    ...
  }
})
export default class App extends Vue {
  pageContent!: string

  get pageContentChanges () {
    return this.pageContent
  }

  set updatePageContent (updateVal: string) {
    this.pageContent = updateVal
  }

  onPushPageContent () {
    this.pageContent = AppNavBar.prototype.pageContent
  }
}
</script>

从“Vue属性装饰器”导入{Vue，组件}
从“./components/AppNavBar.vue”导入AppNavBar
从“./components/AppFooter.vue”导入AppFooter
从“@/views/Home.vue”导入主页
@组成部分({
组成部分：{
...
}
})
导出默认类应用程序扩展Vue{
页面内容！：字符串
获取页面内容更改（）{
返回此网页内容
}
设置updatePageContent（updateVal:string）{
this.pageContent=updateVal
}
onPushPageContent（）{
this.pageContent=AppNavBar.prototype.pageContent
}
}

---

我想实现的下一件事是，在特定情况下，AppNavBar会发出一个事件，将AppNavBar中某个字段的值传递给Home（我尝试通过App.vue执行此操作）。是否有一些方法可以使用setter或类似工具来实现这一点？更具体地说，Home.vue中的模板包含一个带有v-html的div，该div应更改其内容以更改本地属性。

尝试使用事件总线。它可能是一个仅用于事件总线的Vue的简单新实例。只需创建一个库，如下所示：

eventBus.js：

import Vue from 'vue'
const $eventBus = new Vue()
export default $eventBus

然后将该库导入到您的文件中，并使用：

Home.vue：

import $eventBus from './eventBus.js'
$eventBus.$emit('eventName', data)

NavBar.vue：

import $eventBus from './eventBus.js'
$eventBus.$on('eventName', data=>{...})

---

要跨组件通信，考虑使用VUEX存储吗？