Vue3: why a componment instance template ref unable to find defined function

Question

LoginAccount.vue

<script setup lang="ts">
import { rules } from './config/AccountConfig'
import { reactive } from 'vue'
import { ref } from 'vue';
import { ElForm } from 'element-plus';
const account = reactive({
  name: '',
  password: ''
})
const formRef = ref<InstanceType<typeof ElForm>>()


const loginAction = () => {
  console.log("开始登录")
  formRef.value?.validate((valid) => {
    if (valid) {
      console.log("登录逻辑")
    }
  })
}
// 规则

</script>

LoginPanel

<script setup lang="ts">
import LoginAccount from './LoginAccount.vue'
import LoginPhone from './LoginPhone.vue'
import { ref } from 'vue'
const isKeepPassword = ref(false);

const accountRef = ref<InstanceType<typeof LoginAccount>>()



const handleLoginClick = () => {
  console.log("立即登录")

  accountRef.value?.loginAction() No property exists " loginAction"
}
</script>

error How do I type the imported component, so that when I call its methods through refs, it checks exposed method names and types of passed arguments?

accountRef.value?.loginAction() No property exists " loginAction"

how to solve it?

Michal Levý · Accepted Answer · 2022-07-24 18:01:05Z

1

Docs

Components using <script setup> are closed by default - i.e. the public instance of the component, which is retrieved via template refs or $parent chains, will not expose any of the bindings declared inside <script setup>

To explicitly expose properties in a <script setup> component, use the defineExpose compiler macro

<script setup lang="ts">
import { rules } from './config/AccountConfig'
import { reactive } from 'vue'
import { ref } from 'vue';
import { ElForm } from 'element-plus';
const account = reactive({
  name: '',
  password: ''
})
const formRef = ref<InstanceType<typeof ElForm>>()


const loginAction = () => {
  console.log("开始登录")
  formRef.value?.validate((valid) => {
    if (valid) {
      console.log("登录逻辑")
    }
  })
}
// 规则

defineExpose({
  loginAction,
})

</script>

answered Jul 24, 2022 at 18:01

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fanxing Over a year ago

very very thanks you, i solve it

Collectives™ on Stack Overflow

Vue3: why a componment instance template ref unable to find defined function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related