Вызов vue компонента свойства компонента через событие из другого компонента - PullRequest
Новая
       41

Вызов vue компонента свойства компонента через событие из другого компонента

0 голосов
/ 25 февраля 2020

У меня есть приложение 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 to Home (я пытался сделать это через App. vue). Есть ли какой-нибудь способ использовать сеттеры или аналогичные для этого? Чтобы быть более конкретным, шаблон в Home. vue содержит div с v- html, который должен изменить свое содержимое для изменений локального свойства.

1 Ответ

1 голос
/ 25 февраля 2020

Попробуйте автобус для мероприятий. Это может быть простой новый экземпляр 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=>{...})
...