Использование атрибута ref с элементом dom вне шаблона компонента VueJS 2

Question

В настоящее время я борюсь со ссылками на существующие элементы DOM с помощью VueJS.

У меня есть существующий ввод даты, отрисованный из шаблона ветки приложения, и отдельного виджета VueJS, который я интегрировал.

<input type="time" ref="date_time_1" min="09:00" max="18:00" value="13:30">

Поле ввода даты НЕ находится внутри шаблона компонентов, но находится внутри приложения VueJS (с id="#app").

Для привязки данных я хотел бы использовать атрибут ref для соединения компонента VueJS с моим полем ввода даты внутри шаблона компонентов (например, для инициализации значениями, поступающими из приложения):

mounted() {
  componentsTimeValue: this.$refs["date_time_1"].value;
}

получение undefined здесь.

Есть ли способ соединить "существующие" элементы DOM (которые не созданы с vue), с vue компонентами, использующими атрибут ref вообще?

Answer 1

Хотя это не очень хорошая практика, потому что контейнер #div передается vue для манипуляции, но вы все равно можете ссылаться на dom, который был создан не vue, а l ie внутри # app

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

mounted() {
  componentsTimeValue: this.$root.$refs["date_time_1"].value;
}