Связывание двух компонентов Vue.js

У меня есть один компонент файла, который используется для отображения данных, и другой, который используется для редактирования одних и тех же данных. В представлении есть метки и абзацы, где в качестве компонента редактирования есть входы и текстовые поля.Связывание двух компонентов Vue.js

Оба эти компонента используют один и тот же объект данных. Есть ли способ, который, редактируя поля (связанные с v-model в компоненте редактирования), меняет a на компонент вида?

Например, вот мой paragraph.vue, который используется для отображения данных

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

и вот диалоговое окно редактирования

<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>

источник

2016-12-01 Mikko

Если у них есть один и тот же родительский компонент, вы можете использовать событие для обозначения нового значения параграфа. –

Если вы хотите использовать события, прочитайте о реквизитах компонентов https://vuejs.org/v2/guide/components.html#Props и о пользовательских событиях https://vuejs.org/v2/guide/components.html#Custom- События в официальной документации. Я предполагаю, что в представленном решении есть тот, который вы ищете. Конечно, централизованное управление государством (с vuex) - действительно хорошее решение. –

Если у вас есть несколько компонентов, используя одни и те же данные, вы можете использовать как описано в разделе documentation.

Но если количество компонентов увеличивается, и происходит много изменений, может потребоваться централизованное управление состоянием, например vuex, что обычно является предпочтительным в сообществе.

источник

2016-12-01 12:11:44 Saurabh

Связывание двух компонентов Vue.js

ответ

Смежные вопросы