使用 Typescript 将 Vue/JS 元素引用分配给常量

Question

我有一个包含一个表单元素和一个按钮元素的模板：

  <button
    type="submit"
    id="ms_sign_in_submit"
    ref="submitButton"
    class="btn btn-lg btn-primary w-100 mb-5">
  </button>

我在脚本中 const 调用了 submitButton。

const submitButton = ref<HTMLButtonElement | null>(null);

submitButton 元素 (id="ms_sign_in_submit") 以某种方式从 assigned/inherited(?) 变为 submitButton.value，但我不明白如何实现。 submitButton 元素从未明确分配给 submitButton const.

Answer 1

Vue 自动将模板引用分配给 ref 并使用从 setup() 挂钩返回的匹配名称，如以下代码所示：

<template>
  <button ref="submitButton">Submit</button>
</template>     

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const submitButton = ref<HTMLButtonElement | null>(null);
    return { submitButton }
  }            /* automatically assigned to template ref of same name */
})
</script>

模板引用分配不是您自己明确要做的事情。

听起来 const 可能有些混乱。即使 submitButton 是一个 const 对象，它的 value 属性仍然可以修改。这适用于所有 const 不是 frozen (Object.freeze()) or declared with const assertions (as const) in TypeScript (demo) 的对象。

使用 Typescript 将 Vue/JS 元素引用分配给常量

Assigning Vue/JS element ref to a const with Typescript

html

typescript

vue.js

vuejs3

vue-composition-api