Vue 3 Как пере рендерить компонент из другой ветки?

Question

[andreyi4]

Есть такая упрощенная структура:

Dashboard: {
	TheModal: {
		TaskFormAdd
	},
	TheContent: {
		BoardInbox: {
			TaskList: {
				TaskListItem
			}
		},
		BoardToday: {
			TaskList: {
				TaskListItem
			}
		}
	}
}

Как из TaskFormAdd перерендерить TaskList?
Или как перерендерить нужный компонент где угодно?

Компоненты TaskFormAdd, BoardInbox, BoardToday добавляются динамически.

Answer 1

[Alex]

Если вам по какой-либо причине хочется вручную "перерендерить" компонент, то скорее всего вы что-то делаете не так. Vue сам управляет отображением данных в зависимости от этих самых данных. Следовательно в вашем случае, TaskFormAdd должен изменить данные, а TaskList среагировать на эти изменения и изменить отображение.

Comments

[andreyi4]

При создании TaskList я получаю список задач. При добавлении задачи в TaskFormAdd с помощью provide/inject я закрываю (удаляю) TheModal уже через метод компонента Dashboard. При этом я уже могу взаимодействовать с корневым в этой цепочке. Но как мне распространить изменение в TaskList? Или же мне нужно собирать список задач не в TaskList, а в корне Dashboard и передавать в TaskList по цепочке или через provide/inject, как в этом случае будет реактивно?

[Aetae]

andreyi4, реактивно будет если передаёте реактивный объект. Любой в любом направлении.)
Вообще, если структура усложняется, то пора задуматься над vuex.
Если же это единичный случай - можно создать stand-alone реактивный объект через Vue.observable и импортировать его в нужных местах.

[andreyi4]

Aetae, почитал документацию vuex и понял что это как раз то что нужно. У меня получается много компонентов в различных ветках, которые выводят одни и те же списки в различных форматах, но все зависят от одного добавился или удалился элемент в этих списках.
Спасибо!