通过来自另一个组件的事件调用vue组件属性setter

Question

我有一个带有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>

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

Answer 1

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

eventBus.js:

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

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

主页.vue：

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

导航栏.vue：

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