将ref属性与VueJS 2组件模板外部的dom元素一起使用

Question

我目前正在努力使用VueJS引用现有DOM元素。

我有一个从应用程序树枝模板渲染的现有日期输入，并集成了一个单独的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。

是否有一种方法可以使用ref属性将“现有” DOM元素（不是使用vue创建的）与vue组件进行连接？

Answer 1

尽管不是一个好习惯，因为#div容器已移交给vue进行操纵，但您仍然可以引用不是由vue创建但位于#app内部的dom

为此，您必须正确引用，因此，如果您使用的是某些子组件，则>]

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