0

I've been learning Vue, and one thing that I'm struggling to understand is how can I edit information across two separate components.

I have a background in PHP, so setting a global variable would be one way to accomplish this in that. But with Vue, I'm not entirely sure.

For example: Say that Component1 creates a text box that shows a value of "dog" somewhere on the page. And from Component1 you can update and change that value through input fields.

Later, say that Component5 also has an input field that needs to change that text box's value to "cat."

If these two components are separate, and Component1 is controlling that original value, then how can Component5 access that value, update it or manipulate it?

Essentially, what's the best way to handle a piece of information that needs to be accessed/changed from multiple different components or pieces of the Vue application?

user2835645
  • 65
  • 3
  • 6
  • Possible duplicate of [Communication between sibling components in VueJs 2.0](https://stackoverflow.com/questions/38616167/communication-between-sibling-components-in-vuejs-2-0) – Roy J Apr 06 '18 at 21:19
  • I wrote a huge [answer on Vue communication theory](https://stackoverflow.com/a/49702934/1218980) in the linked question. – Emile Bergeron Apr 07 '18 at 01:54

1 Answers1

0

Probably the best way will be to use Vuex. It provides a store, where you can add all data which you need in multiple components.

https://vuex.vuejs.org/en/intro.html

David Yunevich
  • 194
  • 8