vue3中基于script setup语法糖的$refs使用

本文介绍了在 Vue3 中如何使用 script setup 语法糖来调用子组件的方法。不同于 Vue2,Vue3 需要通过 ref 获取子组件实例,并在 onMounted 钩子中调用其方法。子组件需使用 defineExpose 将方法暴露出去。详细步骤包括设置子组件 ref、获取子组件实例、子组件定义公开方法和父组件调用方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在用vue3开发项目的时候,需要调用子组件的方法,于是想着用$refs来实现,但是我是使用script setup语法糖,原先vue2的语法已经不适用了。

于是一番折腾和查阅资料,终于搞定。

vue2语法

vue2语法在组件上设置ref属性后,在代码里可以通过 this.$refs.ref值 访问到对应的子组件。

一个设置ref值的组件:

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

在js代码中可以通过如下代码访问到这个组件:

this.$refs.usernameInput

可以调用里面的方法:

// 假设 base-input 组件内有方法foo

this.$refs.usernameInput.foo();

详细使用可以参考底部列出的参考文章。

vue3使用

网上找了一些文章比较零散,而且试了下都不能用,但是通过这些文章了解到了一些关键信息,最后整理出如下几步:

1. 组件设置ref值

这个和vue2的类似,父组件调用子组件的时候设置ref值。

<ChildVue ref="childRef" />

2. 组件实例获取

设置完成后,vue3可以通过ref方法获取。

const childRef = ref();

这边变量的名字需要和上面ref的一致。如何直接打印childRef,这个时候会是:

undefined

因为页面组件还没有挂载完成,所以需要在挂载完成之后才能正常使用。

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

3. 子组件内设置对外公开的变量

上面第2步获取到子组件实例后,无法使用子组件内的方法,因为使用 script setup 的组件默认是关闭的,如果需要公开,需要使用 defineExpose 编译器宏。

// 子组件代码
const foo = () => {
  console.log("foo");
}
defineExpose({
  foo
});

父组件内调用:

// 调用子组件方法
childRef.value.foo(); // foo

这样就可以调用到子组件的方法了。

查看childRef.value,也可以看到其中公开的foo方法:

1

如果有帮助你解决问题,请帮忙点个赞,谢谢。

完整参考代码:

父组件:

<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 {…}
    // 调用子组件方法
    childRef.value.foo(); // foo
});
</script>

<style>
</style>

子组件:

<template>child demo</template>

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

<style>
</style>

参考文档

vue2访问子组件实例或子元素:https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E6%88%96%E5%AD%90%E5%85%83%E7%B4%A0
vue3 expose:https://v3.cn.vuejs.org/api/options-data.html#expose
vue3 defineexpose:https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineexpose

<think>嗯,用户问的是在Vuesetup函数中使用this.$refs的问题。首先我记得Vue 3的Composition API中,setup是替代了之前的data、methods等选项的,而且setup是在组件实例创建之前运行的,所以这时候this应该是undefined,不能像以前那样用this.$refs。 那用户可能之前在用Options API,现在转到Composition API,遇到了refs的问题。在setup里,应该使用ref函数来创建响应式引用,然后通过返回这些引用来在模板中使用。比如用const myRef = ref(null),然后在模板里标记为ref="myRef"。这样在setup里就可以直接访问myRef.value来操作DOM元素或组件实例。 不过用户可能试过在setup里用this.$refs,结果发现不行,然后报错了。需要解释为什么不能使用this,以及正确的使用方法。另外,可能还需要提醒他们,ref在onMounted之后才能访问,因为那时候DOM才渲染完成。 还有,用户可能没有正确导入ref函数,或者忘记在setup返回中暴露ref变量,导致模板无法绑定。需要检查这些步骤,给出具体的例子,说明如何声明和使用ref,以及在生命周期钩子中访问的时机。 最后,可能需要区分模板ref和组合式API中的ref,避免混淆。总结一下,要明确setup中没有this,改用ref函数和.value访问,同时注意生命周期的问题。</think>在Vue 3的`<script setup>`语法中,使用`this.$refs`会遇到问题。以下是关键点说明: 1. **`setup`特性限制** - `setup()`是组合式API的入口,在组件创建**前**执行 - 此时组件实例`this`尚未生成,因此`this`为`undefined` - 所有Options API中的`this.xxx`用法在此均不可用 2. **正确使用模板引用的方式** ```vue <script setup> import { ref, onMounted } from &#39;vue&#39; // 1. 声明响应式引用 const myElement = ref(null) onMounted(() => { // 3. 在挂载后可访问DOM console.log(myElement.value) // 输出DOM元素 myElement.value.style.color = &#39;red&#39; }) </script> <template> <!-- 2. 通过ref属性绑定 --> <div ref="myElement">Hello World</div> </template> ``` 3. **注意事项** - 必须使用`ref()`函数创建响应式引用 - 通过`.value`访问实际引用 - 建议在`onMounted`生命周期后操作DOM - 引用命名需与模板中的`ref`属性一致 - 对组件引用时,获取的是组件实例 4. **特殊场景处理** ```javascript // 多个元素引用 const inputs = ref([]) // 模板中使用 ref="inputs" <input v-for="i in 3" :key="i" ref="inputs"> ``` 5. **与Options API对比** 传统方式: ```javascript export default { mounted() { console.log(this.$refs.myElement) } } ``` 组合式API的优势: - 更好的TypeScript支持 - 更清晰的响应式数据流 - 逻辑关注点更集中 遇到具体使用场景时,建议结合`watchEffect`或`watch`监听引用变化,确保操作DOM的时机正确。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晴空闲雲

感谢家人们的投喂

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值