我遵循本教程:https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication
将数据从一个组件传递到另一个组件
请参阅下面的案例。我这样试试
我的观点是这样的:
<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>
我的 search-filter-view 组件是这样的:
<script>
export default{
props:[...],
data(){
return{
...
}
},
methods:{
filterBySort: function (sort){
bus.$emit('sort-param', sort)
this.sort = sort
...
}
}
}
</script>
我的搜索结果 View 组件是这样的:
<script>
export default {
props:[...],
data() {
return {
...
}
},
methods: {
getVueItems: function(page) {
bus.$on('sort-param', function (sort) {
console.log(sort);
})
...
}
}
}
</script>
然后我在\resources\assests\js\app.js 上添加 var bus = new Vue();
所以它可以在任何地方访问
我想将排序参数的值(filterBySort 方法,组件一)显示到 getVueItems 方法(组件二)
执行时,控制台出现如下错误:
Uncaught ReferenceError: bus is not defined
如何解决错误?
最佳答案
您需要从 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>
关于javascript - 如何解决Uncaught ReferenceError : bus is not defined? (vue.js 2),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42288327/