时间戳

首页 > 解决方案 > 在 VueJS 2 组件模板外使用带有 dom 元素的 ref 属性

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

问题描述

我目前正在努力使用 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这里。

有没有办法将“现有”DOM元素（不是用vue创建的）与使用该ref属性的vue组件连接起来？

标签： vue.jsvuejs2vue-component

解决方案

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

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

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

推荐阅读