Как решить Uncaught ReferenceError: шина не определена? (vue.js 2)

Question

Я это руководство: https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

It для передачи данных от компонента к другому компоненту

Смотрите мой случай ниже. Я стараюсь как то

мой взгляд, как это:

<div class="row"> 
    <div class="col-md-3"> 
     <search-filter-view ...></search-filter-view> 
    </div> 
    <div class="col-md-9"> 
     <search-result-view ...></search-result-view> 
    </div> 
</div> 

Мой поиск фильтр-вид компонента, как это:

<script> 
    export default{ 
     props:[...], 
     data(){ 
      return{ 
       ... 
      } 
     }, 
     methods:{ 
      filterBySort: function (sort){ 
       bus.$emit('sort-param', sort) 
       this.sort = sort 
       ... 
      } 
     } 
    } 
</script> 

Мой поиск-результат-вид компонента, как это:

<script> 
    export default { 
     props:[...], 
     data() { 
      return { 
       ... 
      } 
     }, 

     methods: { 
      getVueItems: function(page) { 
       bus.$on('sort-param', function (sort) { 
        console.log(sort); 
       }) 
       ... 
      } 
     } 
    } 
</script> 

И добавить var bus = new Vue(); на \ ресурсы \ assests \ JS \ app.js

Таким образом, можно получить доступ в любом месте

Я хочу отображения значения параметра сортировки (метод filterBySort, компонент один) к методу getVueItems (компонент два)

При выполнении в консоли существует ошибка, как это:

Uncaught ReferenceError: bus is not defined

Как я могу решить эту ошибку?

Answer 1

Вам нужно будет экспортировать переменную шину из App.vue и импортировать ее там, где вам это нужно.

То, что я лично сделать, это создать специальный файл для него: bus.js

import Vue from 'vue' 
export default new Vue() 

и импортировать его, как это, где это необходимо:

import bus from 'path/of/bus' 
<script> 
    export default{ 
     props:[...], 
     data(){ 
      return{ 
       ... 
      } 
     }, 
     methods:{ 
      filterBySort: function (sort){ 
       bus.$emit('sort-param', sort) 
       this.sort = sort 
       ... 
      } 
     } 
    } 
</script> 

Answer 2

Вам необходимо убедиться, что ваш код, который определяет переменную, var bus = new Vue();, выполняется перед кодом, использующим эту переменную.

Кроме того, убедитесь, что переменная шины доступна кодом, который ее использует.