在 VueJS 2 组件模板外使用带有 dom 元素的 ref 属性

Posted 2023-02-23

【中文标题】在 VueJS 2 组件模板外使用带有 dom 元素的 ref 属性

【英文标题】：Using the ref attribute with dom element outside a VueJS 2 component template

【发布时间】：2020-06-07 05:54:32

【问题描述】：

我目前正在努力使用 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 组件连接起来？

【参考方案1】：

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

为此，您必须正确引用，因此如果您在某些子组件中使用

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