将数据从子组件传递到子组件 Vuejs 2
2017-05-05
350
我误解了将子组件传递给其他子组件的文档。
我有两个组件
index.html
<main-categories-products source="{{ url('api/products') }}">
</main-categories-products>
<sidebar-options> </sidebar-options>
我的 app.js
var app = new Vue({
el: '#app',
components: {
MainCategoriesProducts,
SidebarOptions
}
})
MainCategoriesProducts.vue
import Vue from 'vue'
var bus = new Vue()
export default{
props: ['source'],
created(){
this.fetchedProduct()
},
methods: {
fetchedProduct: function(){
var data = [1,2, 3];
bus.$emit('did-something', data);
}
}
}
我的 SidebarOptions.vue
import Vue from 'vue'
var bus = new Vue()
export default{
data(){
return {
someData: {}
}
},
created(){
bus.$on('did-something', data => this.someData = data);
console.log(this.someData)
}
}
没有错误,但我无法将数据从 MainCategoriesProducts 传递到 SidebarOptions。我怎样才能获取这些数据 = [1, 2, 3]?谢谢
1个回答
您正在创建两辆不同的总线,但您应该只创建一辆。
在 app.js 中添加此
window.bus = new Vue();
并从每个组件中删除
var bus = new Vue()
。
Bert
2017-05-05