I have a component (Foo), one of whose data props is an instance of a class that's handling a lot of non-UI stuff (Bar). There will be some events within Bar that need to trigger behaviour in Foo. I'd like to wire them up in a way that respects the Vue data-flow model as much as possible. What would be the recommended approach for this? My naive solution would be to have some methods in Bar to set event handlers, so eg. in mounted I do this.bar.onMyEvent(this.onBarEvent). Is this the best I can hope for, or is there a more Vuey way to do it?
export default {
name: 'Foo',
data: () => ({
bar: new Bar(/* ... */)
}),
methods: {
onBarEvent (data) {
// do stuff with data
}
},
}
