1、使用ref函数(推荐)
<template>
<form action="" method="post" ref="registerForm">
请输入用户名:<input type="text" name="userName">
请输入密码:<input type="text" name="password">
请输入手机号码:<input type="text" name="phoneNumber">
<button>提交</button>
</form>
</template>
<script lang="ts">
import { defineComponent, nextTick, onMounted, ref } from 'vue'
export default defineComponent({
setup() {
// 定义一个ref变量,并设置默认值
const registerForm = ref(1)
onMounted(() => { // 钩子触发时会打印相应dom节点
console.log(registerForm.value)
})
// 作为一个与template里的ref同名变量return出去
return{
registerForm
}
}
})
</script>
2、通过getCurrentInstance方法获取vue实例
<template>
<form action="" method="post" ref="registerForm1">
请输入用户名:<input type="text" name="userName">
请输入密码:<input type="text" name="password">
请输入手机号码:<input type="text" name="phoneNumber">
<button>提交</button>
</form>
</template>
<script lang="ts">
import { defineComponent, onMounted,getCurrentInstance } from 'vue'
export default defineComponent({
setup() {
onMounted(() => {
console.log(getCurrentInstance().ctx.$refs.registerForm1)
})
}
})
</script>