CODEWITHSUNDEEP
typescriptvue.jsvue-componentvue-events
nymvno
nymvno

Reputation: 400

Call vue component property setter via event from another component

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.

Upvotes: 0

Views: 399

Answers (1)

Anatoly Shishkin
Anatoly Shishkin

Reputation: 79

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=>{...})

Upvotes: 1

Related Questions