Shulou(Shulou.com)06/02 Report--

How to use vue3 based on script setup syntax $refs, for this problem, this article details the corresponding analysis and solution, hoping to help more small partners who want to solve this problem find a simpler and easier way.

Vue2 syntax

vue2 syntax After setting the ref attribute on the component, you can pass this.$in the code refs.ref value to the corresponding subassembly.

A component that sets ref values:

This component can be accessed in js code by:

this.$ refs.usernameInput

You can call the method inside:

//assume there is a method foo this.$in the base-input component refs.usernameInput.foo();

See the reference articles listed at the bottom for details.

VUE3 is used

I found some articles on the Internet that were scattered, and I couldn't use them after trying them, but I learned some key information through these articles, and finally sorted out the following steps:

1. component set ref value

This is similar to vue2, where the ref value is set when the parent calls the child.

2. Component instance acquisition

Once set, vue3 can be obtained via the ref method.

const childRef = ref();

The name of this variable needs to be the same as ref above. How to print childRef directly, this time will be:

undefined

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

onMounted(() => { console.log(childRef.value); // Proxy {…}});3. Set variables that are open to the outside world in the subassembly

After obtaining 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 want to expose it, you need to use the defineExpose compiler macro.

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

Call within parent component:

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

This allows you to call methods of child components.

Check childRef.value, and you can also see the foo method exposed in it:

vue3 Parent component calls child component method

Full reference code:

Parent component:

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 {…} //invoke subcomponent methods childRef.value.foo(); // foo});

Subassembly:

child demo const foo = () => { console.log("foo");} defineExposure ({ foo}); The answer to the use of vue3 based on script setup syntax $refs is shared here. I hope the above content can be of some help to everyone. If you still have a lot of doubts, you can pay attention to the industry information channel to learn more.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.