Так а как правильно пробросить объект в дочерний компонент?

Question

Vue.js — русскоговорящее сообщество

Igor Shuvalov

Так а как правильно пробросить объект в дочерний компонент?

#frontend #javascript #programming #russian #vue.js

0

19.09.2023

8 ответов

26 просмотров

Artyom Tuchkov

если хочешь использовать v-model на пропсе, то нужно писать проксирующий computed с сеттером: в геттере должен возвращаться сам пропс, в сеттере должен эмититься ивент, а родитель уже должен подписаться на этот ивент и обновлять твой пропс (либо в родителе тоже можно сделать v-model)

0

19.09.2023

Igor Shuvalov Автор вопроса

Artyom Tuchkov
если хочешь использовать v-model на пропсе, то нуж...

Тяжело осознать это. Был бы признателен примеру

0

19.09.2023

Artyom Tuchkov

Igor Shuvalov
Тяжело осознать это. Был бы признателен примеру

покажи скрин пропсов, которые передаешь

0

19.09.2023

Igor Shuvalov Автор вопроса

Artyom Tuchkov
покажи скрин пропсов, которые передаешь

Не у компа, к сожалению (

0

19.09.2023

Igor Shuvalov Автор вопроса

Artyom Tuchkov
если хочешь использовать v-model на пропсе, то нуж...

Computed передать через v-model?

0

19.09.2023

Artyom Tuchkov

Igor Shuvalov
Computed передать через v-model?

нет, у тебя 2 варианта: 1. если свойств немного (1-3), то можно написать computed с сеттером для каждого свойства отдельно, а потом напрямую их передавать в инпуты, форма такой: const email = computed({ get: () => props.object.email, set: (email) => emit(‘update:object’, { …props.object, email }), }); 2. если свойств много, то я бы предложил убрать v-model на инпутах вообще и байндить напрямую - это выходит намного короче и удобнее, чем создавать отдельные копии/computed’ы т.е. вместо v-model ты пишешь :modelValue=“object.email” @update:modelValue=“update({ email: $event })” ну и отдельно небольшую функцию update, которая делает то же самое, что и сеттер из первого примера, просто дополнительно подхватывает твое переданное поле, т.е. function update(fields) { emit(‘update:object’, { …props.object, …fields }); } можешь еще рассмотреть 3 вариант с глубокой копией, о котором написали выше, но я не вижу в этом смысла

0

19.09.2023

Artyom Tuchkov

Artyom Tuchkov
нет, у тебя 2 варианта: 1. если свойств немного (...

ну и подразумевается, что родитель будет слушать update:object и обновлять сам объект, разумеется

0

19.09.2023

Artyom Tuchkov · Accepted Answer

Artyom Tuchkov

через пропсы, здесь все правильно проблема в том, что ты потом эти пропсы мутируешь через v-model, а так делать не нужно

0

19.09.2023

169 похожих чатов

Так а как правильно пробросить объект в дочерний компонент?

8 ответов

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