Vuejs have multiple components sharing variables and functions

Question

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.

You should make a container / list component, what has many message component. — LakiGeri
– LakiGeri, Commented Sep 29, 2017 at 8:47
I can't visualise how that would work could you give an example? I presume your saying that this component would store say the messages and the message function and the other components directly use those functions and variables? Just don't understand how can you do that. — seb14717
– seb14717, Commented Sep 29, 2017 at 8:53

tony19 · Accepted Answer · 2022-07-15 02:13:26Z

1

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.

edited Jul 15, 2022 at 2:13

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 29, 2017 at 9:03

Stephan-v

20.5k32 gold badges125 silver badges213 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

seb14717 Over a year ago

Alright, mixins look really nice. So i suppose i could put it in a .js file and export var mixinName {} and import it? Also i see that i can call functions which is nice could i create data and be able to do like this.messages because that would be awesome!

Stephan-v Over a year ago

Yes you can import it just like you described, the functionality of the mixin will get merged with the functionality of the component. You could also set data and all other options that Vue components provide.From the documentation: A mixin object can contain any component options.

seb14717 Over a year ago

Curious, if say i have 3 components that will use the mixin or extend. Should i import it in each component or make it globally available?

Stephan-v Over a year ago

Use global mixins sparsely and carefully, because it affects every single Vue instance created, including third party components

. If you would use a global mixin it would be to add bare minimal logic like a log handler or something like that. I would not ever use global mixins since they affect every instance. That is unless you are 100% sure you will stick to these 3 components and your package will not use third party components.

seb14717 Over a year ago

So like when i create say a CMS i create one Vue instance and just load all my components into it. Is this bad practice? Should I have a chat.js file and have just my chat vue instance in there or what's best? Or is it just about user preference.

Collectives™ on Stack Overflow

Vuejs have multiple components sharing variables and functions

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related