您应该能够通过分派事件将属性从组件向上发送到根/全局 Vue 实例。分派事件意味着您正在向 Vue 树中组件的父组件发送一条包含属性的消息。您可以使用以下语法分派事件:
this.$dispatch('event-name', this.list);
这表示发送一个 ID 为event-name
,包含属性this.list
,到组件的父级。
如果您的组件的父组件正在侦听 ID 为 的确切消息,则它只能接收此分派属性event-name
。您可以使用以下代码监听父组件中的事件(这在父组件中):
events: {
'event-name': function(property) {
console.log("Property from child component" + property);
}
}
总的来说,您的代码应该如下所示:
Vue.component('employees', {
template: '#employees',
props:['list'],
created() {
this.list = JSON.parse(this.list);
this.$dispatch('send-list', this.list);
}
});
new Vue({
el: 'body',
data: {
rootlist: {}
},
events: {
'send-list': function(property) {
this.rootlist = property;
console.log("Property from child component" + property);
}
}
});
这将使您的所有[list]
根 Vue 实例中可用的数据。如果您想将其发送到所有组件,您可以创建一个广播事件this.$broadcast('send-list-down', this.list);
内send-list
功能。$broadcast
做完全相同的事情$dispatch
,但它将数据沿着 Vue 树向下发送,而不是向上发送。只需确保在组件内创建事件侦听器并用于send-list-down
event.