Самый простой способ передачи данных из компонента в компонет?

Question

[senefu]

Как передать данные из child в child?

У меня есть такое в компоненте №1

data () {
    return {
      msg: 'Message from Component №1'
    }
  }

Как его передать в Компонент 2?

Answer 1

[Evgeny Kulakov]

Кого его?) Стандартный способ передачи от компонента-родителя к компоненту-потомку - использование пропсов:
https://ru.vuejs.org/v2/guide/components.html#Пере...

Comments

[senefu]

Его - "msg", кого ж еще))
Вопрос прочитали? Мне не надо от компонента-родителя к ребенку. Мне надо от ребенка к ребенку.

[senefu]

И да, я еще прочитал про Event Bus, но ведь у меня нету событий, у меня просто объект data (). Как его передать из child?

[Evgeny Kulakov]

Можно через ref, типа такого: https://codepen.io/kerf/pen/eRbZPz.
Если у вас одни и те же данные используют различные компоненты, имеет смысл vuex использовать.

[senefu]

Evgeny Kulakov: 404

Vuex это да, у меня интерес чисто теоретический. Не до конца я понимаю как эта вся дата гуляет по компонентам.

[Evgeny Kulakov]

Тут вроде все есть: https://ru.vuejs.org/v2/api/#data.
Все что сидит в data компонента можно получить либо через $data либо при обращении просто к экземпляру из-за проксирования. В примере выше получаем экземпляр объекта через ref и обращаемся к его свойству(которое было проксировано из data)

[senefu]

Evgeny Kulakov: так получается надо все равно в родителе объявить сначала msg: ''

[senefu]

Evgeny Kulakov: в целом, да, это самое интересное решение что я пока встретил. Спасибо!

[Evgeny Kulakov]

senefu: Необязательно, можно ref использовать, но в любом случае чтобы вам из одного компонента передать в другой они должны существовать, поэтому передачу можно делать не ранее чем в событии mounted: https://codepen.io/kerf/pen/awPmzX

[senefu]

Evgeny Kulakov: так предупреждение вылазит

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. Prop being mutated: "msg"

[Evgeny Kulakov]

Ага, можно попробовать заменить props на объект data с этим свойством.

[senefu]

Evgeny Kulakov: это уже вроде хаки. Я в принципе удовлетворил свое любопытство первым вариантом :)