Как правильно работать с props во Vue.js?

Добрый день, не могу толком понять принцип работы props.
Например, есть страница, включающая в себя отдельный компонент с textarea. В этой textarea может быть текст, полученный с бэкенда. Я передаю этот текст компоненту в props, и потом на клиенте мне надо изменить этот текст и вернуть его бэкенду. Если пытаться изменять текст напрямую в props, я получаю предупреждение: "Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value".
Ок, допустим, я продублирую значение props в data (хотя это уже по сути, дублирование кода в каком-то смысле) и буду юзать его оттуда. И даже ухитрюсь как-нибудь передать новый текст в бэкенд. Но если, например, мне нужно, чтобы текст при изменении динамически менялся не только в textarea, но и в другом, изначально не связанном с textarea компоненте? В этом случае лучше вообще все во vuex хранить и экшенами фигачить в него изменения?
Словом, как все-таки правильно работать с props максимально гибко?
  • Вопрос задан
  • 6736 просмотров
Решения вопроса 1
origami1024
@origami1024
went out for a night walk
Вот официальная схема. Родители детям через props, назад через events.
5dbadb9101ea4780880983.png

1) Пример объявления child в template родителя
<child :somedata="data1" @bestEventEver="someMethod"/>

-передаешь данные из переменной родителя data1 чилду в пропс somedata.
-вешаешь метод родителя someMethod для обработки кастомного ивента 'bestEventEver', приходящего из чилда

2) В child вызываешь this.$emit('bestEventEver', 'params pam pams')

Есть сокращения этого для простых случаев через :v-model и .sync, читай официальный гайд

Но если, например, мне нужно, чтобы текст при изменении динамически менялся не только в textarea, но и в другом, изначально не связанном с textarea компоненте

Если нужно общение не уровня родитель-ребенок, а все со всеми, вот варианты
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Djaler
@Djaler
Сеньор-помидор
Если компоненты связаны иерархически - то при изменении в дочернем нужно кидать наверх события. Если не связаны - то можно воспользовать Vuex, да
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы