vue3-setup中获取$refs

1,926 阅读1分钟

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>