CODEWITHSUNDEEP
vue.jsvuejs2
seb14717
seb14717

Reputation: 135

Vuejs have multiple components sharing variables and functions

Right this is more about practice, I haven't really got a working scenario but I can provide an example. Imagine Facebook messenger, you have a chat widget in the header where you can quickly view and respond to messages. You can also click view all to take you off to the messages page.

So to me I can see myself having two Vue components, they're more sibling than parent and child as one would be used on all pages and the other simply on the messages page.

<chat></chat> and <chat-widget></chat-widget>

Now from what I can see, across the widget and the chat window itself is functions that would operate in the same way, maybe they'll have slightly different templates because of where they are loaded but somethings straight of the bat would be:

messages() {}
compose() {}
validate() {}

These are just some examples as I use Laravel as my backend I would be using axios to send requests between my Vue frontend and my backend (database).

Ideally, I wouldn't want these components to duplicate it's functions, so should I simply duplicate them or is there a way where i can store some sort of parent functions?

One problem is because of async ajax requests I can't simply call a function that returns say the messages for me to bind, at least, I don't think I can.

Just looking for some guidance on how I can best do this with Vue so that I'm not duplicating identical functionality within my components.

Upvotes: 3

Views: 1911

Answers (1)

Stephan-v
Stephan-v

Reputation: 20289

You can use composition to create a "base/abstract" component from which other components can extend:

https://v2.vuejs.org/v2/api/#extends

var CompA = { ... }
// extend CompA without having to call `Vue.extend` on either
var CompB = {
  extends: CompA,
  ...
}

You can inherit the functionality from the "base/abstract" class or override parts of the functionality of the parent.

Another thing you could do is to create mixins:

https://v2.vuejs.org/v2/guide/mixins.html#ad

This is helpful if your components need to share functionality but are not largely the same. If you were to use extend in those cases you would likely override the majority of base functionality to these are a better in that case.

Of course nothing would stop you from simply extracting commonly used methods into a separate file and importing them in your components directly.

Upvotes: 1

Related Questions