通过来自另一个组件的事件调用 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，它应该根据本地属性.

上的更改更改其内容。

Answer 1

试试事件总线。它可能是一个简单的 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=>{...})

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

Call vue component property setter via event from another component

typescript

vue.js

vue-component

vue-events

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

Call vue component property setter via event from another component

typescript

vue.js

vue-component

vue-events

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