0

我有一个带有 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，它应该更改其内容以更改本地属性。

4

1 回答 1

1

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

事件总线.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=>{...})
于 2020-02-25T10:57:32.650 回答