Call vue component property setter via event from another component

Question

I have a vue application with an App.vue like the following:

<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>

The next thing I want to achieve is that in a particular case, AppNavBar emits an event which passes the value of a field in AppNavBar to Home (I tried to do this over App.vue). Is there some way to use setters or similar to achieve this? To be more concrete, the template in Home.vue contains a div with v-html that should change its content for changes on a local property.

to communicate across component, consider using vuex store ? — Jake Lam, Feb 25 '20 at 10:53

score 1 · Accepted Answer · answered Feb 25 '20 at 10:57

Try an event bus. It may be a simple new instance of Vue using only for event bus. Just create a library llike that:

eventBus.js:

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

Then import it that library to your files and use:

Home.vue:

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

NavBar.vue:

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

Call vue component property setter via event from another component

1 Answers1