Vue3 based on script setup syntax $refs usage

1. Vue2 syntax

After setting the ref attribute on the component in vue2 syntax, the corresponding subcomponent can be accessed through the this.$refs.ref value in the code.

A component that sets a ref value:

<base-input ref="usernameInput"></base-input>

In the js code, you can access this component through the following code:

this.$refs.usernameInput

You can call the method inside:

// Assume that the base-input component has method foo
 
this.$refs.usernameInput.foo();

For detailed usage, please refer to the reference articles listed at the bottom.

2. Use of Vue3

I found some scattered articles on the Internet, and none of them worked after I tried them, but I learned some key information from these articles, and finally sorted out the following steps:

1. Set the ref value of the component

This is similar to vue2, where the parent component sets the ref value when calling the child component.

<ChildVue ref="childRef" />

2. Obtaining component instances

After the setting is completed, vue3 can be obtained through the ref method.

const childRef = ref();

The name of the variable here needs to be consistent with ref above. How to print childRef directly, this time it will be:

undefined

Because the page component has not been mounted yet, it needs to be mounted before it can be used normally.

onMounted(() => {
    console.log(childRef.value); // Proxy {…}
});

3. Set public variables in subcomponents

After getting the subcomponent instance in step 2 above, you cannot use the methods in the subcomponent because the component using script setup is closed by default. If you need to make it public, you need to use defineExpose compiler macro.

// Subcomponent code const foo = () => {
  console.log("foo");
}
defineExpose({
  foo
});

Call in parent component:

// Call child component method childRef.value.foo(); // foo

In this way, you can call the method of the subcomponent.

Look at childRef.value and you can see the public foo method:

Vue3 parent component calls child component method

Complete reference code:

Parent component:

<template>
    <ChildVue ref="childRef" />
</template>
 
<script setup lang="ts">
import { ref } from '@vue/reactivity';
import { onMounted } from '@vue/runtime-core';
import ChildVue from './Child.vue';
 
const childRef = ref();
console.log(childRef.value); // undefined
 
onMounted(() => {
    console.log(childRef.value); // Proxy {…}
    // Call child component method childRef.value.foo(); // foo
});
</script>
 
<style>
</style>

Subcomponents:

<template>child demo</template>
 
<script setup lang="ts">
const foo = () => {
  console.log("foo");
}
defineExpose({
  foo
});
</script>
 
<style>
</style>

This is the end of this article about the use of $refs based on script setup syntax in Vue3. For more information about the use of $refs in Vue3, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!