Как передать $refs в другой компонент Vue?

Question

[Валерий В.]

Добрый день!
Есть родительский компонент, в нем есть элемент $refs.element
Как передать дочернему компоненту эту ссылку на элемент?
Ну или как получить доступ из дочернего компонента к этому элементу в родительстком компоненте?
UDP: $parent подходит только для непосредственного родителя, нужен доступ к любому предку по иерархии.

Answer 1

[WebDev]

В дочернем компоненте есть свойство $parent - это родительский компонент.
Соответственно, в дочернем компоненте:
this.$parent.$refs

Comments

[WebDev]

Iglint, Это нехорошо только с точки зрения того, что компонент может еще где-то использоваться. И у него будет другой родитель. Если автор знает об этом и уверен, что дочерний элемент не будет больше нигде использоваться, то почему нет? Это гораздо проще и быстрее, чем другие варианты.

[Валерий В.]

Iglint, вопрос в другом - нужна просто ссылка на DOM элемент в родительском компоненте, причем он может быть не прямым родителем, а просто предком. И в родительском компоненте менять ничего не требуется. Просто нужно получить доступ к этому элементу.
P.S. Нужен ответ именно на этот вопрос, без других вариантов.

[Валерий В.]

WebDev, плохой совет. Компоненты должны быть слабо связанные, поэтому нужно бороться за чистоту кода. Согласен с комментом выше

Не хорошо, когда дочерний компонент изменяет родительский.

Answer 2

[Evgeny Kulakov]

Почему бы просто не передать этот $refs.element в пропсы дочернего компонента.

Comments

[Валерий В.]

А если дочерних компонентов не один, а тысяча?
А если нужный компонент не прямой потомок, а через 7 поколений?

[Evgeny Kulakov]

Валерий В.,
1. Можно использовать provide/inject - в родительском делаете provide нужного объекта, далее в в потомке делаете его inject.
2. Использовать vuex - сохраняете в стор ссылку на объект, далее используете ее в любом компоненте.