I have a template with one form element and one button element:

  <button
    type="submit"
    id="ms_sign_in_submit"
    ref="submitButton"
    >
  </button>

I have const called submitButton in the script.

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

Somehow the submitButton element (id="ms_sign_in_submit") gets assigned/inherited(?) to submitButton.value, but I don't understand how. submitButton element is never explicitly assigned to submitButton const.

CodePudding user response：

Vue automatically assigns a template ref to the ref with a matching name returned from the setup() hook, like in the following code:

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