vue js передача данных через глобальную шину событий не работает - PullRequest
Новая
       48

vue js передача данных через глобальную шину событий не работает

1 голос
/ 24 марта 2020

Используя vue cli Я создал простое приложение vue с двумя вложенными компонентами. Я хочу передать данные между ними, щелкнув тег h1 в моем компоненте 1 (более структурированный подход предлагает использовать vuex, но это очень простое приложение, передающее простые данные для тестирования).

Нажатие на h1, которое я получаю ошибка, но я не понимаю Ошибка говорит 

[Vue warn]: Error in event handler for "titleChanged": "TypeError: Cannot read property 'apply' of undefined"

(found in <Root>)

Мой код ниже

основной. js

import Vue from 'vue'
import App from './App.vue'
import Axios from 'axios'

Vue.config.productionTip = false
Vue.prototype.$http = Axios

export const bus = new Vue();

new Vue({
  render: h => h(App),
}).$mount('#app')

приложение. vue 

<template>
  <div>
    <comp-1 v-bind:title="title"></comp-1>
    <comp-2 v-bind:title="title"></comp-2>
  </div>
</template>

<script>
  import comp-1 from './components/Comp-1.vue'
  import comp-2 from './components/Comp-2.vue'

  export default {
    components: {
      'comp-1': comp-1,
      'comp-2': comp-2
    },
    data() {
      return {
        title: "my title"
      }
    }
  }
</script>

<style scoped>

</style>

комп-1. vue

<template>
    <header>
        <h1 v-on:click="changeTitle">{{ pTitle }}</h1>
    </header>
</template>

<script>
    import {bus} from '../main'

    export default {
        props: {
            title: {
                Type: String
            }
        },
        data() {
            return {
                pTitle: ''
            }
        },
        created: function() {
            this.pTitle = this.title
        },
        methods: {
            changeTitle: function() {
                this.pTitle = 'I have changed my title!'
                bus.$emit('titleChanged', this.pTitle)
            }
        }
    }
</script>

<style scoped>

</style>

комп-2. vue

<template>
    <footer>
        <p>{{ title }}</p>
    </footer>
</template>

<script>
    import {bus} from '../main'

    export default {
        props: {
            title: {
                Type: String
            }
        },
        data() {
            return {
                pTitle: ''
            }
        },
        created() {
            this.pTitle = this.title;

            bus.$on('titleChanged'), (data) => {
                this.title = data
            }
        }
    }
</script>

<style scoped>

</style>

1 Ответ

0 голосов
/ 24 марта 2020

В созданном компоненте comp-2 в обработчике событий есть ошибка

Измените его следующим образом: 

bus.$on("titleChanged", data => {
  this.title = data;
});
...