Binding Two Vue.js Components

Question

I have one component of a file that is used to display data, and another that is used to edit the same data. The view has labels and paragraphs, where there are inputs and text fields as an editing component.

Both of these components accept the same data object. Is there a way that, when editing fields (associated with the v-model in the editing component), changes a to a component of the view?

For example, here is my paragraph.vue , which is used to display data

 <template> <div class="row"> <div class="col-xs-12"> <p>{{ text }}</p> </div> </div> </template> 

and here is the edit dialog

 <template> <div class="form-group"> <label for="paragaph-text">Paragraph</label> <textarea id="paragaph-text" class="form-control" v-model.trim="text"></textarea> </div> </template> 

Answer 1

If you have multiple components using the same data, you can use the sharing state as described in the documentation .

But if the number of components increases and many changes occur, you may need centralized state management, such as vuex , which is usually preferred in the community.