I follow this tutorial : vuejs/v2/guide/components.html#Non-Parent-Child-Communication
It to passing data from a component to other component
See my case below. I try like that
My view is like this :
<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>My search-filter-view component is like this :
<script> export default{ props:[...], data(){ return{ ... } }, methods:{ filterBySort: function (sort){ bus.$emit('sort-param', sort) this.sort = sort ... } } } </script>My search-result-view component is like this :
<script> export default { props:[...], data() { return { ... } }, methods: { getVueItems: function(page) { bus.$on('sort-param', function (sort) { console.log(sort); }) ... } } } </script>And I add var bus = new Vue(); on esourcesassestsjsapp.js
So it can be accessed anywhere
I want display value of sort parameter (filterBySort method, component one) to getVueItems method (component two)
When executed, in the console exist error like this :
Uncaught ReferenceError: bus is not defined
How can I solve the error?
解决方案You will need to to export the variable bus from the App.vue and import it where ever you need it.
What I personally do is I create a dedicated file for it: bus.js
import Vue from 'vue' export default new Vue()and import it like this where it is needed:
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>
更多推荐
如何解决 Uncaught ReferenceError: bus is not defined?(vue.js 2)
发布评论